react系列-事件绑定的几种方法对比

Posted 2021-01-26 sunlili

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react系列-事件绑定的几种方法对比相关的知识，希望对你有一定的参考价值。

前言

本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

React事件绑定

由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。

通常如果不是直接调用，应该为方法绑定this。绑定方式有以下几种：

1. 在构造函数中使用bind绑定this

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log(‘this is:‘, this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

2. 在调用的时候使用bind绑定this

class Button extends React.Component {
 handleClick(){
 console.log(‘this is:‘, this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

3. 在调用的时候使用箭头函数绑定this

class Button extends React.Component {
 handleClick(){
 console.log(‘this is:‘, this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

4. 使用属性初始化器语法绑定this(实验性)

class Button extends React.Component {
 handleClick=()=>{
 console.log(‘this is:‘, this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}