React中的表單應用

React中的表單應用

用戶在表單填入的內容，屬於用戶跟組件的互動，因此不能用this.props讀取。

var Input = React.createClass({
    //初始化組件數據
    getInitialState(){
        return {value:'hello'};
    },
    handleChange(event){
        this.setState({value:event.target.value})
    },
    render(){
        var  value = this.state.value;
        <div>
            <input type='text' value={value}  onChange={this.handleChange} />
            <p>{value}</p>
        </div>
    }
});

ReactDOM.render(
    <Input />,
    document.body
);

上面代碼中，文本輸入框的值，不能用this.props.value讀取，而要定義一個onChange事件的回調函數，經過event.target.value讀取用戶的值。textarea元素、select元素、radio元素都屬於這種狀況，