Handling Text Input ?

TextInput

TextInput은 사용자로부터 입력을 받을수가 있습니다.

onChangeText props을 통해서 입력값을 계속해서 받을수가 있습니다.

 

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

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

따라서 위와 같은 코드에서는 onChangeText을 통해서 계속해서 state가 변경되고 Text Component는 해당 text에 값을 사용해서 피자 이모티콘으로 변경을 하는것을 알수가 있습니다.

 

placeholder

입력값이 없을때 보여주는 값으로 설정할수가 있습니다.

placeholder="Type here to translate!"

defaultValue

기본적으로 입력값을 설정 할수가 있습니다.

defaultValue={text}

placeholderTextColor

placeholder에 색깔을 지정할수가 있습니다.

placeholderTextColor='#3f3f3f'

 

더 자세히 알고 싶다면 위에 링크를 통해 확인할수가 있습니다.