Question

我有这个代码。我从Semantic UI导入了一些组件。

import React from 'react'
import { Card, Image, Grid } from 'semantic-ui-react'

我正在尝试在加载图片时出现错误（404）时调用函数。

export default class HotelCards extends React.Component {
  // constructor
  constructor(props){
    super(props)
    this.handleError = this.handleError.bind(this);
  }
  // state
  state = {}

这是我想要调用的函数:(如果我在渲染函数中记录this，我得到当前类的实例）

  handleError() {
    console.log(this);
  }

  render() {
    if (!this.props.hotels) return null;
    return (
        <Grid doubling stackable columns="4" className="cards-container">
        {
            this.props.hotels.map(function(e, i) {
                return (
                  <Grid.Column key={i} className="card-column">
                    <Card>

从这个元素：

                      <Image src={e.hotel.image} onError={this.handleError} />
                    </Card>
                  </Grid.Column>
                )
            })
        }
      </Grid>
    );
  }//render
}//class

但是我收到this为undefined的错误。

TypeError: this is undefined
Stack trace:
render/<@http://localhost:1337/app/bundle.js:63883:92
...

在vanilla JavaScript中，我的方法是

<img src="image.png" onError="this.onerror=null;this.src='/placeholder.jpg';" />

如何正确地将此功能绑定到组件？

Answer 1

典型的方法是使用所谓的＆＃34;后期绑定＆＃34;，即

constructor() {
    // ...
    this.handleError = this.handleError.bind(this);
}

handleError() {
    console.log('THIS', this);
}

您的代码不起作用的原因是因为您的胖箭头绑定到定义您的类的上下文。

或者，您也可以按照另一个答案中的建议在渲染级别进行绑定，所以：

<Image src={e.hotel.image} onError={this.handleError.bind(this)} />

但是，该解决方案的问题在于，它会在每次调用render方法时生成一个新的处理函数，如果您＆＃可以（但不必）对渲染性能产生负面影响39;重新使用某种财产平等测试优化技术。

Answer 2

ES6中不支持胖箭头作为类中的方法，因此您首先必须将 handError 定义为如下方法：

handleError() {
    console.log('test');
}

并且您应该能够绑定它，以便在需要时可以使用 this ：

 <Image src={e.hotel.image} onError={this.handleError.bind(this} />

要使渲染函数中的 bind 无效（在某些情况下可以有性能），您可以在构造函数中执行绑定：

this.handleError = this.handleError.bind(this);

Answer 3

好的，我找到this为undefined的原因。

因为这些东西发生在.map方法中，所以我必须像这样绑定this：

this.props.hotels.map(function(e, i) {
 ...
}, this)

或@apendua评论，使用箭头功能，this不会丢失：

 this.props.hotels.map((e, i) => {
     ...
  })

Answer 4

@kunok：很高兴你找到了答案。箭头函数（=＆gt;）使 this 上下文与封闭函数相同。

Answer 5

添加this.state是构造函数内部的组件。

React - 将函数绑定到组件时未定义

5 个答案: