[React-Native] TextInput의 focus 넘기기

로그인 화면 같은 경우 여러 개의 TextInput이 있고,

키보드의 focu를 다음 TextInpu으로 넘겨 바로 값을 입력받고 싶을 때 사용한다.

즉, 여러개의 값을 연속으로 받고 싶을 때 기능을 구현한다.

 

useRef

useRef를 사용하여, 특정 component를 가리킬 수 있습니다.

 

useRef 특징

• component 속성에 Ref를 지정하고 사용해야 한다.
• ref변수를 바로 사용할 수 없다. current property를 사용해야 한다.
• 변경되어도 component가 다시 랜더링 되지 않는다.
• 컴포넌트의 속성만 조회&수정을 한다.

const refInput = useRef(null);
// useRef를 통해 refInput을 먼저 만든다.

<Input ref={refInput} />
// component에 ref속성으로 지정해준다.

refInput.current.focus();
// refInput.current으로 focus를 이동한다.

---

TextInput focus 옮기기

const secondTextInput = useRef();

<TextInput
    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => secondTextInput.current.focus() }
    blurOnSubmit={false}
/>

<TextInput
    ref={secondTextInput}
    placeholder="secondTextInput"
/>

 

blurOnSubmit

TextInput 컴포넌트는 기본적으로 submit을 하고 나면 blur 처리된다.

focus를 잃고 자판이 자동적으로 사라지는데, 그것을 막기 위해서는 blurOnSubmit 속성을 변경해주면 된다.

기본값은 true이며, blurOnSubmit={false}로 바꿔주면 된다.

<TextInput blurOnSubmit={false} />

blurOnSubmit={false}로 해주지 않으면 키보드가 들어갔다가 다시 나온다.

 

 

참고

https://joylee-developer.tistory.com/159

React Native - useRef, TextInput 여러 값 연속 입력받기

https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar

React Native: How to select the next TextInput after pressing the "next" keyboard button?