텍스트 입력 처리

 

TextInput사용자가 텍스트를 입력할 수 있게 해주는 핵심 구성요소 다 . onChangeText텍스트가 변경될 때마다 호출되는 함수를 취하는 prop과 onSubmitEditing텍스트가 제출될 때 호출되는 함수를 취하는 prop이 있다 .

예를 들어, 사용자가 입력할 때 해당 단어를 다른 언어로 번역한다고 가정해 보겠다. 이 새로운 언어에서는 모든 단어가 같은 방식으로 작성된다: 🍕. 따라서 "안녕하세요 밥"이라는 문장은 "🍕 🍕"으로 번역된다.

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  );
};

export default PizzaTranslator;

text가 예에서는 시간이 지남에 따라 변경되므로 상태에 저장한다 .

텍스트 입력으로 수행할 수 있는 작업이 더 많이 있다. 예를 들어 사용자가 입력하는 동안 내부 텍스트의 유효성을 검사할 수 있다. 더 자세한 예를 보려면 제어되는 구성 요소에 대한 React 문서 또는 TextInput에 대한 참조 문서를 참조하자.

텍스트 입력은 사용자가 앱과 상호작용하는 방법 중 하나이다. 

TextInput · React Native