【React.js】フォームのフォーカスを自動的に次に切り替えていく方法

なにがしたいか

よくある電話番号などのフォームが３つに分かれているタイプで、３文字入力したら次のフォームへ自動的にフォーカスを移動。次の４文字を入力したら自動的に次のフォームへフォーカスを移動。ということをReactでやりたい。

jQueryなどでは容易だがReactではどうすれば？と思ったのでメモ。

結論

いくつか方法は見つかったが一番簡単な方法。
Inputタグにrefを指定し、ReactDOMを使ってrefで指定したInputを見つけ、フォーカスを当てる。

やり方

１．ReactDOMとrefの指定

import ReactDOM from 'react-dom'

…(省略)

<Input 
  type="tel"
  maxLength={4}
  size={4}
  autoFocus={true}
  value={this.state.tel1}
  onChange={e => this.tel1Change(e.target.value)}  
/>
<Input 
  type="tel"
  maxLength={4}
  size={4}
  ref="nm2"
  value={this.state.tel2}
  onChange={e => this.tel2Change(e.target.value)}  
/>

一つ目のフォームはレンダリング時にフォーカスが当たっていればいいだけなので「autoFocus={true}」でおっけー。
２つ目のフォームにrefで属性名を指定しておき、1つ目のonChangeで呼ばれるイベント内でフォーカスの操作を書く。

２．onChangeのイベント内

tel1Change(value) {
  this.setState({ tel1: value });
  if(value.length === 4){
    let input = ReactDOM.findDOMNode(this.refs.tel2);
    input && input.focus();
  }
}

まずは普通にフォーム内に入力された値をstateにセットするが、その後、入力されている値のlengthをみて、4文字だったら、tel2の要素をReactDOMを使って取得し、focus()メソッドでフォーカスを移動させる。

同様に、３つ目のフォームにrefを指定し、２つ目のイベント内で条件に応じてフォーカスするように書く。