React.jsでrenderした後にテキストボックスにフォーカスを移す

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

概要

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

  1. input タグには ref 属性を指定しておく。
  2. ReactDOMimport する。
  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" />
    );
  }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です