投稿

5月, 2016の投稿を表示しています

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: "選択肢2", value: "2"}] return ( ); } });
どのように定義されているか調べた。

クラスに focus メソッドを生やせば ref を通して呼べる仕組みになっているようだ。

------------------…