Reactに挑戦してみる 9

概要

Reactに挑戦してみる9。かなり複雑になりつつある。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

TextAreaコンポーネント　フォーム

var TextArea = React.createClass({
# State初期化メソッド、プロパティ値をstateの初期値にセットする。
    getInitialState: function(){
        return {dispText: this.props.dispText};
    },

# onChangeの時に、よびだされるメソッド
    handleInput: function(event){
        this.setState({dispText: event.target.value});
        console.log(this.state.dispText);
    },
# render メソッドのセット
    render: function() {
        return (<div>何か入力してください：
            <textarea
                value={this.state.dispText}
                onChange={this.handleInput}
                rows="3"
            />
        </div>);
    }
});

ReactDOM.render(
    <TextArea dispText='未編集' />,
    document.getElementById('content')
);