プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

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

  • 2020年10月31日
  • 2020年11月3日
  • JavaScript
  • 5727view
  • 0件

なにがしたいか

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

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

結論

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

やり方

1.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}」でおっけー。
2つ目のフォームにrefで属性名を指定しておき、1つ目のonChangeで呼ばれるイベント内でフォーカスの操作を書く。

2.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()メソッドでフォーカスを移動させる。

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