Reactの勉強4日目(ステートの更新)
本日の課題
テキストエリアに対して、即座に文字数をカウントして出力
解答
<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>
テキストエリアに入力すると、
注意点
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) ); }
勉強になりました。