React 表單

九、表單

用戶在表單填入的內(nèi)容，屬于用戶跟組件的互動，所以不能用 this.props 讀取（查看 demo9 ）。

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

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

上面代碼中，文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調(diào)函數(shù)，通過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬于這種情況，更多介紹請參考官方文檔。