[react native] onChange (vs) onChangeText, e.nativeEvent

마데슾 : My Dev Space·2020년 6월 16일

react-native

목록 보기

3/5

onChange vs onChangeText

react native TextInput에서 onChange 이벤트를 사용해 e.target.value를 얻으려 시도했다. 콘솔에 찍어보니 undefined가 나온다. 구글링 고고고!!

react native TextInput onChange event 이렇게 검색했더니 도움되는 글이 바로 나왔다.

onChangeText와 onChange 둘다 사용이 가능하다. 차이점은 아래에 설명..!

onChangeText

onChange가 단순화 된 버전
event.target.value를 없이도 값을 변경할 수 있다.

  const [count, setCount] = useState('0');
  <TextInput type="number" value={count} onChangeText={text => setCount(text)}/>

onChange
react-native에서는 e.target.value가 아니라 event.nativeEvent 이렇게 쓰나보다..!

const [count, setCount] = useState('0');
const countInputHandler = useCallback(e => {
    const { text } = e.nativeEvent;
    console.log('e.nativeEvent ? ', e.nativeEvent);
    setCount(text);
  }, []);
<InputCount type="number" value={count} onChange={countInputHandler} />

참고글

react-native `enter` 이벤트

multiline 속성이 true일 경우에만 Enter 키에 대한 onPress 이벤트가 발생한다고 한다.
한 줄 TextInput의 경우 onSubmitEditing 메소드에서 Enter또는 Submit 키 이벤트가 발생한다.
- multiline 속성이 false일 경우에만 사용가능하다

const [tagList, setTagList] = useState([]);
const [inputValue, setInputValue] = useState('');

const tagInputEnterEventHandler = useCallback(e => {
  console.log('event.nativeEvent ? ', e.nativeEvent);
  const { text } = e.nativeEvent;
  setInputValue('');
  setTagList(prev => [...prev, text]);
}, []);

return (
  <>
    <InputTextStyle
      onSubmitEditing={tagInputEnterEventHandler}
      placeholder="기술스택 입력 후 엔터"
      value={inputValue}
      onChangeText={text => setInputValue(text)}
    />
    <TagList>
      {tagList && tagList.map(tagName => <TagListItemComponent tagName={tagName} />)}
    </TagList>
  </>
);