[react-native]리액트 네이티브 포커스 이동

리액트 네이티브 포커스 이동 인터넷에 있는 글들은 대부분 작동하지 않았다. 

 

예를 들면, 이런 코드가 들어있는 글이다.

 

 this.secondTextInput.focus(); 

ref={(input) => { this.secondTextInput = input; }}

구버전의 리액트 네이티브에서 작동하던 코드가 버전업으로 인해 작동하지 않는 것으로 보인다.

 

대부분, this가 사용되지 않는다는 waring이 뜨는데, 실제로 프로그램은 돌아가도 코드는 작동하지 않는다.

 

그래서 스택 오버 플로우를 뒤지던 중에 한 글을 발견했는데, 그 방법대로 쓰니 제대로 작동하였다.

 

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?

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()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => ref_input3.current.focus()}
        ref={ref_input2}
      />
      <TextInput
        placeholder="Input3"
        ref={ref_input3}
      />
    </>
  )
}