React で input 要素に focus したい話

5月 15, 2016

したいよねー、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 (
      

      
);
  }
});

どのように定義されているか調べた。

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

------------------------------
以下は間違っていた。

Async に定義されている

Select の statics に取り込んでいるっぽい？

statics でコンポーネントの static メソッドを定義することができる

なるほど statics にメソッドを定義することでコンポーネントのAPIを定義できるらしい。
それを利用して生DOMと同じようなインターフェイスにしてやるといい感じに扱えるよね、という話みたい。

このブログを検索

ひょうたん