Motomichi Works Blog

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

React.jsその0004 input type="text" の要素に入力した値をbutton要素のonClickイベントで反映する(UnControlled Component)

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

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>