react 学习笔记（四）：事件与this指向问题

react 事件绑定

以绑定一个点击事件为例, 在需要绑定点击事件的元素上添加 onClick 属性，值为需要触发的函数，如

class Home extends Component {
  constructor(props) {
    super(props);
  }

  sayHello(){
    alert('Hello')
  }

  render() {
    return (
      <div>
        <button onClick={this.sayHello}>Say Hello</button>
      </div>
    );
  }
}

其他类型的事件绑定方法都与此相似，注意不同的事件名称即可。

this 指向问题

在事件处理函数中，我们常常需进行数据的读取和修改，如果我们按照上面的例子直接访问 state 是不会成功的，因为函数中的 this 与组件的 this 并不相同，例如，在上面的例子中 state 加一个 msg 数据，点击时弹出 msg 的值

constructor(props) {
  super(props);
  this.state = { 
    msg : 'Hello'
  };
}

如果我们直接把 sayHello 函数改成

sayHello(e){
  alert(this.state.msg);
}

点击后会发现报错了，TypeError: Cannot read property 'state' of undefined, 这就是 this 指向不对的问题，在这个函数中无法读取到组件的 state 内容，我们需要将这个函数的 this 指向组件，有三种方法可以实现:

1. 绑定事件时使用 bind 方法改变 this 指向，修改为

<button onClick={this.sayHello.bind(this)}>Say Hello<button>  

2. 在构造函数中改变 this 指向，在构造函数中添加

this.sayHello = this.sayHello.bind(this)

3. 使用箭头函数，将 sayHello 函数改为

sayHello = () => {
  alert(this.state.msg);
}

事件传值

event 对象会作为参数传入我们所绑定的事件函数之中，我们可以这样访问它

sayHello = (e) => {
  alert(this.state.msg);
  console.log(e);
}

点击之后，控制台会打印出这次事件的 event 对象

如果我们需要传入自定义的参数，如我们要点击之后弹出我们传入的内容，可以使用 bind 方法实现，修改 sayHello 函数

sayHello = (msg) => {
  alert(msg);
}

再通过 bind 传入我们想要显示的内容

<button onClick={this.sayHello.bind(this,'Hello')}>Say Hello</button>

如果我们即需要自定参数，也需要 event, 只需要使定义的形参比通过 bind 传入的参数多一个就行，最后一个形参对应的就是 event, 如将上面的 sayHello 函数改为

sayHello = (msg, e) => {
  alert(msg);
  console.log(e);
}

我们可以成功获取到 event 对象