React入門-4.事件處理

事件機制

事件綁定語法

React Element的事件綁定與DOM事件綁定很是類似，有兩個不一樣點須要注意：1) 事件名稱採用駝峯式命名。2) 在JSX中事件處理函數爲變量，須要使用大括號括起來解析。 3）不能經過return false阻止事件的默認行爲，必須經過調用preventDefault()

class MyDiv extends React.Component{
    constructor(props){
      super(props);
      this.state = {status : true}
      // 若是要在回調函數中調用this，這行代碼不能省略
      this.toggle = this.toggle.bind(this);
    }
    // 事件處理函數
    toggle(){
      this.setState(state=>({
        status:!state.status
      }));
    }
    // 渲染
    render(){
      return (
        <div onClick={this.toggle}>
          {this.state.status.toString()} , {this.state.status?'NO':'OFF'}
        </div>
      )
    }
  }

  ReactDOM.render(<MyDiv/>,document.getElementById('app'));

this取值

函數中的THIS一直是比較糾結的問題。如上示例代碼中，若是在構造函數中省略下面這行代碼。那麼在事件處理函數中將沒法使用this。下面這行代碼表示將構造函數中的this也就是組件示例自己綁定到事件處理函數上。

this.toggle = this.toggle.bind(this);

固然除了使用這種方式以外，咱們還可使用ES6中的箭頭函數，由於箭頭函數中沒有自身的this，它的this指向它定義的內容也就是組件示例自己。因此第一個案例能夠修改成以下

class MyDiv extends React.Component{
    constructor(props){
      super(props);
      this.state = {status : true}
    }

    // 事件處理函數爲箭頭函數
    toggle = ()=>{
      this.setState(state=>({
        status:!state.status
      }));
    }
    // 渲染
    render(){
      return (
        <div onClick={this.toggle}>
          {this.state.status.toString()} , {this.state.status?'NO':'OFF'}
        </div>
      )
    }
  }

  ReactDOM.render(<MyDiv/>,document.getElementById('app'));

參數傳遞

有兩種參數傳遞方式，一種是經過箭頭函數直接傳遞，箭頭函數中直接調用事件處理函數，實參爲要傳遞的參數與事件對象

class MyDiv extends React.Component{
    constructor(props){
      super(props);
      this.state = {status : true}
    }
    // 事件處理函數
    toggle = (id,e)=>{
      this.setState(state=>({
        status:!state.status
      }));
    }
    // 渲染
    render(){
      return (
        <div onClick={(e)=>this.toggle(1,e)}>
          {this.state.status.toString()} , {this.state.status?'NO':'OFF'}
        </div>
      )
    }
  }

另一種是經過調用bind函數，將this與要傳遞給函數值做爲實參進行傳遞

class MyDiv extends React.Component{
    constructor(props){
      super(props);
      this.state = {status : true}
    }
    // 事件處理函數
    toggle = (id)=>{
      this.setState(state=>({
        status:!state.status
      }));
    }
    // 渲染
    render(){
      return (
        <div onClick={this.toggle.bind(this,1)}>
          {this.state.status.toString()} , {this.state.status?'NO':'OFF'}
        </div>
      )
    }
  }