React Native - TextInput component

사용자의 text input을 다루는 컴포넌트이다. 여러가지 속성이 있음.

<TextInput 
  onSubmitEditing={addToDo}
  placeholder={working ? "Add a To Do" : "Where do you want to go?"} 
  value={text}
  style={styles.input}
  keyboardType='email-address'
  returnKeyType='send'
  onChangeText={onChangeText}
  // secureTextEntry : 비밀번호 입력할 때 처럼 보임
  // multiline : textArea처럼 여러줄작성
  // placeholderTextColor : "red" placeholder색바꾸기
  // autoCapitalize={"words"} 대문자 설정
/>

keyboardType은 상황에 따른 키패드 유형을 지정할 수 있음

• default
• number-pad
• decimal-pad
• numeric
• email-address
• phone-pad
• url

returnKeyType은 엔터버튼 전송/이동 등으로 바꾸기

onChangeText는 input창이 바뀔때마다 실행할 함수

onSubmitEditing은 submit 버튼 클릭 시 실행할 함수

수정 완료시에 실행할 함수를 작성하는 onEndEditting도 있다.

 

 

아래 코드는 간단하게 To-Do 앱 만드는 중 . . . .

export default function App() {

  const [working, setWorking] = useState(false);
  const [text, setText] = useState("");
  const travle = () => setWorking(false);
  const work = () => setWorking(true);
  const onChangeText = (payload) => setText(payload);

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity activeOpacity={0.5} onPress={work}>
          <Text style={{...styles.btnText, color: working ? "white" : theme.gray}}>Work</Text>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.5} onPress={travle}>
          <Text style={{...styles.btnText, color : !working ? "white" : theme.gray}}>Travel</Text>
        </TouchableOpacity>
      </View>
      <View>
        <TextInput 
          placeholder={working ? "Add a To Do" : "Where do you want to go?"} 
          value={text}
          style={styles.input}
          returnKeyType='send'
          onChangeText={onChangeText}
        />
      </View>
    </View>
  );
}

 

 

https://reactnative.dev/docs/textinput

TextInput · React Native