React學習之事件綁定的幾種方法對比

更新時間：2017年09月24日 16:48:48 作者：jiangwenyang

這篇文章主要給大家介紹了關于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>
 );
 }
}

比較

方式2和方式3都是在調用的時候再綁定this。