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

TextInput을 통해 여러 값을 연속으로 입력받고 싶을 때 어떻게 해야될 지 몰라서 인터넷을 찾아보았다.

 

blurOnSubmit

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

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

 

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

<TextInput blurOnSubmit={false} />

blurOnSubmit과 useRef를 같이 사용하면 다음 input으로 쉽게 넘어갈 수 있다.

 

useRef

javascript에서 특정 요소를 selector를 통해 선택했던 것 처럼, react에서도 특정 component를 가리킬 수 있다.

useRef를 사용하면 가능하다.

 

useRef 사용시 주의점

1. component 속성에 Ref를 지정하고 사용해야 한다.

2. ref변수를 바로 사용할 수 없다. current property를 사용해야 한다.

3. 변경되어도 Component가 다시 랜더링 되지 않는다(useState와 다른점)

아래 코드를 보면 주의점들을 이해할 수 있다.

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

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

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

 

 

여러개의 TextInput이 있을 때, 각각 ref_input을 따로 지정해준다.

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

 

import React, { useRef } from 'react'
...
 
 
const MyFormComponent = () => {
 
  const ref_input2 = useRef();
  const ref_input3 = useRef();
 
  return (
    <>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => ref_input2.current.focus()}
        blurOnSubmit={false}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        blurOnSubmit={false}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}

위와 같이 사용하면 TextInput 3개를 연속으로 입력받을 수 있다.

 

참고한 사이트

https://reactnative.dev/docs/textinput#bluronsubmit

TextInput · React Native

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?