[React Native] blurOnSubmit 속성과 submitBehavior 속성

blurOnSubmit 속성과 submitBehavior 속성

들어가며

• 리액트 네이티브(React Native)의 @TextInput@ 컴포넌트에서 사용할 수 있는 @blurOnSubmit@ 속성과 @submitBehavior@ 속성에 대해 정리해본다.

 

blurOnSubmit 속성

개념

• 우선 @blurOnSubmit@ 속성은 다음과 같이 @TextInput@ 컴포넌트에서 사용할 수 있다.

<TextInput
    style={tw.style('px-3 py-2 font-semibold text-lg', {
      lineHeight: 28,
      outline: 'none', // 포커스 시, 검정색 경계 제거
    })}
    placeholder={placeholder}
    value={text}
    
    blurOnSubmit={true}   // here
    onSubmitEditing={() => {
      setIsFocused(false);
      Keyboard.dismiss(); 
    }}
/>

 

• @blurOnSubmit@ 속성은 @TextInput@ 창 텍스트를 입력하고, 엔터(Enter) 버튼을 누르면 입력한 텍스트가 제출(Submit)되도록 해주는 속성이다.
• 따라서 텍스트 필드가 블러 처리되게 된다.
• 기본값은 단일행(Single-line)의 경우 @true@, 다중 행(Multi-line)의 경우 @false@이다.
• @blurOnSubmit = true@를 지정할 경우, 입력 후(Enter 키 입력 시) 필드가 자동으로 포커스를 잃는다.
• @blurOnSubmit = false@를 지정할 경우, 입력 후에도 필드가 계속 활성화된다. (Enter 입력 시 줄바꿈)
• 다중 행(@multiline = true@) 상태에서 @blurOnSubmit = true@로 설정하면, Enter 키를 누르면 포커스가 해제되며, 줄바꿈 대신 @onSubmitEditing@ 이벤트가 발생한다.

 

submitBehavior 속성

개념

• 최신 버전의 리액트 네이티브에서는 @submitBehavior@ 속성을 이용하여 이 기능을 구현할 수 있다.
  • 기존의 @blurOnSubmit@ 속성은 사용 중단(Deprecated)이 되었다.

<TextInput
  multiline
  submitBehavior="blurAndSubmit"    // 엔터 키 누를 시, 포커스 해제 + onSubmitEditing
  onSubmitEditing={() => console.log('제출됨!')}
  placeholder="내용을 입력하세요"
/>

 

사용 가능한 옵션들

값	설명
@newline@	- 엔터 키를 누르면 줄을 바꾼다. (기본값) - 다중 행(Multi-line) 필드에 적용한다.
@blurAndSubmit@	- 엔터 키를 누르면 필드가 포커스를 잃고(@onBlur@), @onSubmitEditing@이 실행된다. - 이전의 @blurOnSubmit = true@와 동일하다.
@submit@	- 엔터 키를 누르면 줄바꿈 없이 @onSubmitEditing@이 실행된다.

 

blurOnSubmit = true → submitBehavior="blurAndSubmit"  
blurOnSubmit = false → submitBehavior="newline"

 

참고 사이트

TextInput · React Native