React で input 要素に focus したい話
したいよねー、focus。 生DOMを扱えるようなパターンはすぐに見つかるんだけど、自前Reactコンポーネント作った場合にどう扱えばいいのかっていうのがよくわからなかったので調べた話。 statics に focus メソッドを定義してあげるといい感じに使えるみたい。 違った。 ごく普通にクラスに focus メソッドを生やして おけば大丈夫だった。 1. 生DOMを直接扱うパターン 一番ベーシックなパターン。以下の方針でなんとかできる。 refs と findDomNode で生DOMを取得する 生DOM の focus() を呼ぶ refs で生DOMが取れるというのさえ押さえておけばわかる。 なるほどなるほど。こうやるのね... export default React.createClass({ componentDidMount() { ReactDom.findDomNode(this.refs["target"]).focus(); }, render() { return ( ); } }); 2. Reactコンポーネント化する さて、生DOMはわかった。しかしどうコンポーネント化してやればいいのか... ここで参考にしたのが React-Select 。 これは select2 の React 版実装のようなもので `focus()` というメソッドをを提供している。これを参考にしてやると良さそう。 export default React.createClass({ componentDidMount() { this.refs["target"].focus(); }, render() { var options = [{label: "選択肢1", value: "1"}, {label: "選択肢２", value: "2"}] return ( ); } }); どのように定義されているか調べた。 クラスに focu