参考にさせて頂いたページ
reactjs - React.jsでFormを扱う - Qiita
バージョン
React v0.13.2
react_sample.htmlの記述内容
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script type="text/jsx" src="app/react_sample.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
react_sample.jsの記述内容
var App = React.createClass({
//this.state.textValueを宣言
getInitialState() {
return {
textValue: "initial value"
};
},
//changeTextメソッドを定義
changeText(e) {
//this.setState()で状態を更新(ref="inputText"である要素のvalueを取得)
this.setState({textValue: this.refs.inputText.getDOMNode().value });
},
//renderメソッドの戻り値として、Virtual DOMの定義を返す。
//JSXをコンパイルした後のソースとしては、React.createElement()でdiv,p,input,buttonがそれぞれ作られる。
render() {
return (
<div>
<p>{this.state.textValue}</p>
<input type="text" ref="inputText" defaultValue="initial value" />
<button onClick={this.changeText}>change</button>
</div>
);
}
});
//React.render();で#exampleの中にDOMを描画
React.render(
<App></App>,
document.getElementById('example')
);
このソースコードについて
- getInitialState()で初期状態を設定
- changeTextメソッドを定義
- renderメソッドを定義(戻り値はVirtual DOM)
- React.render();で#exampleの中に描画
- input要素のテキストを編集
- button要素のonClickイベントによって、changeTextが実行されて
this.setState({textValue: this.refs.inputText.getDOMNode().value });
される - <App></App>がrerenderされる
出力されたhtmlソース
以下のようにdata-reactid属性が付与されていて、.0
の子要素に.0.0
、.0.1
、.0.2
とツリーのidが順番に割り振られているらしい。
このときhtmlソースには、onClick属性やref属性は表示されない。
<div id="example">
<div data-reactid=".0">
<p data-reactid=".0.0">initial value</p>
<input type="text" data-reactid=".0.1" value="initial value">
<button data-reactid=".0.2">change</button>
</div>
</div>