在使用ES6類的React組件時，您必須遇到這種現象，必須顯式綁定類函數，然后將其傳遞給諸如onClick。例如，采用以下示例。

import React from 'react';class MyComponent extends React.Component {constructor(props) {super(props);this.state = {clicked: false};this.btnClick = this.btnClick.bind(this);}btnClick() {this.setState({clicked: true})}render() {return(<div><ul><li onClick={this.btnClick}>Hello World</li></ul></div>);} }

如您在上面的示例中看到的那樣，為了使btnClick工作正常，我們需要在構造函數中明確地“綁定”該方法。如果我們沒有這樣做，JavaScript將無法this在該btnClick方法中識別。這是因為在JavaScript中，默認情況下未綁定類方法。因此，在使用綁定方法后bind()，它將創建一個新的綁定函數，這是一個包裝原始函數對象的奇異函數對象（來自ECMAScript 2015的術語）。這將提供this對回調函數的訪問。在我們的情況下為btnClick。

使用公共類字段語法

基本上，公共類字段語法是Babel提供的實驗功能。在這里，您可以使用類字段正確綁定回調。這是上面的示例使用此語法的樣子。

import React from 'react';class MyComponent extends React.Component {state = {clicked: false}btnClick = () => {this.setState({clicked: true})}render() {return(<div><ul><li onClick={this.btnClick}>Hello World</li></ul></div>);} }

正如您在上面看到的，我們不再需要定義類的構造函數，因為class字段將實例化該類實例的屬性值。除此之外，由于我們現在使用JavaScript的數組函數語法，我們不再需要顯式綁定該函數，因為this箭頭函數內的作用域指向父作用域。

在回調中使用箭頭功能

import React from 'react';class MyComponent extends React.Component {constructor(props) {super(props);this.state = {clicked: false};}btnClick() {this.setState({clicked: true})}render() {return(<div><ul><li onClick={(e) => this.btnClick(e)}>Hello World</li></ul></div>);} }

但是，這種方法有一個缺點。因此，基本上，每次MyComponent渲染都會創建一個不同的回調。如果將此回調作為對較低組件的支持而傳遞，則可能會出現問題，這些組件可能會進行額外的重新渲染，這可能會降低渲染組件時的性能。

文章參考來源：React中的回調中自動綁定ES6類函數

總結

以上是生活随笔為你收集整理的react回调函数_React中的回调中自动绑定ES6类函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。