React.js で名前変更できるコンポーネントを作っていて必要になったので、メモ。

概要

render の後にテキストボックスにフォーカスをあてるためには ReactDOM を使って、DOM 要素を特定してやる必要がある。

1. input タグには ref 属性を指定しておく。
2. ReactDOM を import する。
3. ReactDOM.findDOMNode を使って DOM ノードを取得。
4. focus() を呼び出す。

ソースコード

ちなみにサンプルは ES6 で書いているので通常の JS で書く場合は修正してください。

componentDidUpdate はロード時だけでよければ componentDidMount でもよいかもしれない。

import React from 'react'
import ReactDOM from 'react-dom'

export default class AwesomeComponent extends React.Component {

  componentDidUpdate() {
    let input = ReactDOM.findDOMNode(this.refs.nameInput);
    input && input.focus();
  }

  render() {
    return(
      <input ref="nameInput" type="text" defaultValue="hogehoge" />
    );
  }
}