React表單

表單的讀取

我們可以用this.prop來讀取來獲取對象，但是用戶在表單填入的內容，屬於用戶跟組件的互動，不能用 this.props來讀取

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
  //通過 event.target.value 讀取用戶輸入的值,不能通過this.props.value 讀取
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
      //需要定義一個onChange事件的回調函數
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

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

onchange 事件：當用戶改變input輸入框內容時執行一段Javascript代碼：
event.target: target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。