React：事件處理

<button onClick={this.handleSaveClick}>保存</button>

當用戶點擊這個按鈕時，組件的handleSaveClick方法會被調(diào)用。

注意：雖然上面代碼的寫法類似HTML的內(nèi)聯(lián)事件處理器（在HTML中是不推薦的），但在渲染后的HTML頁面內(nèi)，我們并不會看到onClick這個方法，這只是React用這種寫法來綁定事件處理器。

這里還要注意一點的是，如果你要調(diào)取觸控事件，就需要調(diào)用下面的代碼來啟用。

React.initializeTouchEvents(true)

看個小例子：

var MyInput=React.createClass({   
  getDefaultProps:function(){   
    return {   
      placeholder:'請輸入值'      
    };   
  },   
  getInitialState:function(){   
    return {    
      name:"請輸入"   
    }   
  },   
  handleChange:function(event){   
    var name=event.target.value;   
    this.setState({"name":"輸入值為："+name});   
  },   
  render:function(){   
    return (   
      <div>   
        <input ref='name' onChange={this.handleChange} type='text' placeholder={this.props.placeholder}/>   
        <div>{this.state.name}</div>   
      </div>   
    );   
  }   
});   
ReactDOM.render(   
  <MyInput/>,   
  document.body   
);

效果圖：

組件狀態(tài)默認是null，我們可以通過getInitialState方法將其初始化。

注意：有一點很重要，永遠不要嘗試通過setState或replaceState以外的方式修改state對象。類似this.state.isClicked=true通常不是一個好方法，因為它無法通知React是否需要重新渲染組件，而且可能會導致下次調(diào)用setState時出現(xiàn)意外結(jié)果。

總結(jié)：

• 我們可以像在HTML里添加內(nèi)聯(lián)事件一樣的方式給React組件上綁定事件處理器。
• 當組件狀態(tài)有更新時，會執(zhí)行render方法，觸發(fā)重繪。
• 用this.setState()來更新狀態(tài)