Как в react передавать фокус от 1 инпута к другому?

Question

[nikmil]

Доброй ночи, у меня 4 инпута, у каждого инпута максимум 1 символ, мне нужно чтобы при вводе одного числа в инпут фокус менялся на 2 инпут и так далее. Как это реализовать? Эти инпуты служат для ввода проверочного кода.

Answer 1

[0xD34F]

function App() {
  const [ values, setValues ] = useState(Array(10).fill(''));

  const onChange = ({ target: t }) => {
    const index = +t.dataset.index;
    const value = t.value;

    setValues(values.map((n, i) => i === index ? value : n));

    if (index < values.length - 1 && value) {
      inputRefs.current[index + 1].focus();
      inputRefs.current[index + 1].select();
    }
  };

  const inputRefs = useRef([]);

  return (
    <div>
      {values.map((n, i) => (
        <div>
          <input
            value={n}
            data-index={i}
            onChange={onChange}
            ref={input => inputRefs.current[i] = input}
            maxLength="1"
          />
        </div>
      ))}
    </div>
  );
}

Answer 2

[Дмитрий]

При рендеринге:

<input 
  ref={someConditionIsTrue ? (input) => { this.focusedInput = input } : null} 
  ...        
/>

и

componentDidMount(){
  this.focusedInput && this.focusedInput.focus();
}