Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

React.jsその0003 input type="text" の要素に入力した値をonChangeでリアルタイムに反映する(Controlled Component)

参考にさせて頂いたページ

reactjs - React.jsでFormを扱う - Qiita

今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference | HTML5Experts.jp

バージョン

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の記述内容

//React.createClass();でコンポーネントを作成する
var App = React.createClass({
  //this.state.textValueを宣言
  getInitialState() {
    return {
      textValue: "initial value"
    };
  },
  //changeTextメソッドを定義
  changeText(e) {
    //this.setState()で状態を更新(changeイベントの起こった要素のvalueをthis.state.textValueに格納)
    this.setState({textValue: e.target.value});
  },
  //renderメソッドの戻り値として、Virtual DOMの定義を返す。
  //JSXをコンパイルした後のソースとしては、React.createElement()でdiv,p,inputがそれぞれ作られる。
  render() {
    return (
      <div>
        <p>{this.state.textValue}</p>
        <input type="text" value={this.state.textValue} onChange={this.changeText} />
      </div>
    );
  }
});

//React.render();で#exampleの中にDOMを描画
React.render(
  <App></App>,
  document.getElementById('example')
);

このソースコードについて

  • getInitialState()で初期状態を設定
  • changeTextメソッドを定義
  • renderメソッドを定義(戻り値はVirtual DOM)
  • React.render();で#exampleの中に描画
  • input要素のonChangeの度にchangeTextが実行されてthis.setState({textValue: e.target.value});される
  • <App></App>がrerenderされる

出力されたhtmlソース

以下のようにdata-reactid属性が付与されていて、.0の子要素に.0.0.0.1とツリーのidが順番に割り振られているらしい。
このときhtmlソースには、onChange属性は表示されない。

<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">
  </div>
</div>