[RN] TextInput과 Enter 이벤트

• multiline 이 false인 경우
  • 기본적으로 blurOnSubmit 은 true로 설정된다.
  • Enter 이벤트가 onKeyPress 에서 캡쳐 x, onSubmitEditing 에서 캡쳐 o
• multiline 이 true인 경우
  • 기본적으로 blurOnSubmit 은 false로 설정된다.
  • Enter 이벤트가 onKeyPress 에서 캡쳐 o, onSubmitEditing 에서 캡쳐 o
  • onKeyPress 에서 e.preventDefault() 가 동작하지 않는다. 아마도 keyValue 자체는 Enter 로 뜨지만, default action이 line break가 아니라 submit이라서 line break를 막지 않는듯.

blurOnSubmit 명세를 보니, multiline 이 true 면서 blurOnSubmit 이 true 라면 line break를 하는 대신 onSubmitEditing 를 트리거한다고 한다.

결국, 다음 두가지 방법이 있다는 것을 알게 되었다.

// multiline 가능
// enter 키 터치 시, 키보드가 hide 됨.
<TextInput 
  ...
  multiline={true}
  blurOnSubmit={true}
  onChangeText={updateSentenceText}
  onSubmitEditing={pushOrUpdateSentence}
/> 

// mutiline 불가능
// enter 키 터치 시, 키보드가 hide 되지 않음.
<TextInput 
  ...
  multiline={false}
  blurOnSubmit={false}
  onChangeText={updateSentenceText}
  onSubmitEditing={pushOrUpdateSentence}
/>