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