devlog_zz

React Native useState , TextInput 본문

Front End/React Native

React Native useState , TextInput

YJ_SW 2021. 1. 18. 13:32
728x90

useState

export default function App() {
  const [name, setName] =useState('aaaa')
  const [person, setPerson] = useState({name:'mario', age:40})
  const clickHandler = () => {
    setName('bbbb')
    setPerson({name:'alice',age:30})
  }

  return (
    <View style={styles.container}>
      <Text>My name is {name}</Text>
      <Text>His name is {person.name}, his age is {person.age}</Text>
      <View style={styles.btnContainer}>
        <Button title='update state'onPress={clickHandler} />
      </View>
    </View>
  );
}

button 클릭하면 setName이 실행됨 ( useState ) 

name이 바뀌면서 화면이 리렌더링 됨

<Button onPress={()=>..}

onPress 사용

<TextInput>

여러줄 입력 받을 때 : multiline

<TextInput
	style={styles.input}
    multiline
    placeholder='e.g John Doe'
    onChangeText ={(val)=>setName(val)}/>

숫자 입력만 받을 때

<TextInput
	style={styles.input}
    keyboardType='numeric'
    placeholder='e.g John Doe'
    onChangeText ={(val)=>setName(val)}/>
728x90

'Front End > React Native' 카테고리의 다른 글

React Native TouchableOpacity  (0) 2021.01.18
React Native FlatList  (0) 2021.01.18
React Native ScrollView  (0) 2021.01.18
Button  (0) 2021.01.18
React Native <View>, <Text>, style, styled-components  (0) 2021.01.18
Comments