React.js で名前変更できるコンポーネントを作っていて必要になったので、メモ。
概要
render の後にテキストボックスにフォーカスをあてるためには ReactDOM
を使って、DOM 要素を特定してやる必要がある。
input
タグにはref
属性を指定しておく。ReactDOM
をimport
する。ReactDOM.findDOMNode
を使って DOM ノードを取得。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" />
);
}
}