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

當(dāng)用戶點(diǎn)擊這個(gè)按鈕時(shí)，組件的handleSaveClick方法會(huì)被調(diào)用。

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

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

React.initializeTouchEvents(true)

看個(gè)小例子：

var MyInput=React.createClass({   
  getDefaultProps:function(){   
    return {   
      placeholder:'請(qǐng)輸入值'      
    };   
  },   
  getInitialState:function(){   
    return {    
      name:"請(qǐng)輸入"   
    }   
  },   
  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)默認(rèn)是null，我們可以通過(guò)getInitialState方法將其初始化。

注意：有一點(diǎn)很重要，永遠(yuǎn)不要嘗試通過(guò)setState或replaceState以外的方式修改state對(duì)象。類似this.state.isClicked=true通常不是一個(gè)好方法，因?yàn)樗鼰o(wú)法通知React是否需要重新渲染組件，而且可能會(huì)導(dǎo)致下次調(diào)用setState時(shí)出現(xiàn)意外結(jié)果。

總結(jié)：

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