f:id:kanekok13:20170815200150p:plain

本日の課題

テキストエリアに対して、即座に文字数をカウントして出力

解答

<body>

<div id="app"></div>

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
var TextAreaCounter = React.createClass({

  propTypes: {
    text: React.PropTypes.string,
  },

  getDefaultProps: function() {
    return {
      text: '',
    };
  },

  getInitialState: function() {
    return {
      text: this.props.text,
    };
  },

  _textChange: function(ev) {
    this.setState({
      text: ev.target.value,
    });
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.state.text,
        onChange: this._textChange,
      }),
      React.DOM.h3(null, this.state.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {
    text: "あいうえお"
  }),
  document.getElementById("app")
);
</script>
</body>

f:id:kanekok13:20170820131431j:plain

テキストエリアに入力すると、
f:id:kanekok13:20170820131436j:plain

注意点

getInitialState()メソッドを追加して、初期値を返して、
データに変更（テキストエリアの内容に変更）があった際に、
this.setState()によって更新していく！
_textChange()はイベントリスナー

this.setState()

_textChange: function(ev) {
  this.setState({
    text: ev.target.value,
  });
},

render()メソッドの方では、
this.propsではなく、this.stateから値を取得するように変更
onChangeはキャメルケース。※clickの場合もonclickではなく、onClick

render: function() {
  return React.DOM.div(null,
    React.DOM.textarea({
      value: this.state.text,
      onChange: this._textChange,
    }),
    React.DOM.h3(null, this.state.text.length)
  );
}