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>
      )
    }
  }