ReactJSのRefs

ref指定された要素への参照を返します。参照通常は避けるべきですが、DOMの測定やコンポーネントにメソッドを追加する必要がある場合、非常に便利です。

参照の使用

以下の例では、参照を使用して入力フィールドをクリアする方法を示します。ClearInput関数の使用ref = "myInput"値を検索要素に設定し、状態をリセットし、ボタンをクリックした後にその要素に焦点を当てます。

App.jsx

import　React　from　'react';
import　ReactDOM　from　'react-dom';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　data:　''
　　　　　　}
　　　　　　this.updateState　=　this.updateState.bind(this);
　　　　　　this.clearInput　=　this.clearInput.bind(this);
　　　};
　　　updateState(e)　{
　　　　　　this.setState({data:　e.target.value});
　　　}
　　　clearInput()　{
　　　　　　this.setState({data:　''});
　　　　　　ReactDOM.findDOMNode(this.refs.myInput).focus();
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<input　value　=　{this.state.data}　onChange　=　{this.updateState}>　
　　　　　　　　　　　　　　　ref　=　"myInput"></input>
　　　　　　　　　　　　<button　onClick　=　{this.clearInput}>CLEAR</button>
　　　　　　　　　　　　<h4{this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,　document.getElementById('app'));

ボタンを押すと、入力がクリアされ、フォーカスが移動します。