Question

我有一个react组件，我正在尝试传递一个span标签和一个onClick事件处理程序。事件处理程序称为“askQuestion”。我使用.bind（this，parameter）函数将onClick事件处理程序绑定到组件的上下文。

尽管我试图绑定到“this”但我仍然在dev工具控制台中收到错误，说“无法读取属性askQuestion of undefined”。我很确定这个错误意味着askQuestion没有正确绑定到组件的上下文。我需要帮助正确绑定askQuestion。

以下是组件：


index.html#/login:1 Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

}

Answer 1

我认为在React中执行此操作的正确方法是在构造函数中绑定它。

constructor(props) {
  super(props)
  this.askQuestion = this.askQuestion.bind(this)
}

Answer 2

<强>解释

问题是您使用Array.prototype.map，除非明确告知，否则不会绑定this，并且回调的上下文是未定义的。来自文档：

如果向thisArg提供了map参数，则会在调用时将其传递给回调，以用作此值。 否则，将传递未定义的值以用作其this值。（强调我的）

thisArg是map的可选参数，请参阅Array.prototype.map Syntax。这意味着，当你这样做：

{this.props.questions.map(this.addQuestion)}

调用this时，

this.addQuestion上下文未定义，因此在调用addQuestion时未定义。让我通过查看您的addQuestion方法进一步说明问题：

addQuestion(question, index) {
  return (
    <div key={index} className="col-xs-12 col-sm-6 col-md-3">
      <span onClick={this.askQuestion.bind(this, question)}>
        {question.q}
      </span>
    </div>
  );
}

在这里，因为如前所述，this未定义，您实际上是在尝试：

undefined.addQuestion.bind(undefined, question)

会抛出错误，因为undefined没有函数addQuestion。

<强>解决方案

再次，从文档：

<强>语法

var new_array = arr.map(callback[, thisArg])

<强> thisArg

可选。执行回调时要使用的值。

您可以看到我们可以明确地将this上下文传递给map，以便在回调中用作this上下文。这意味着我们可以在函数中传递一个额外的参数为this。这可以这样应用：

{this.props.questions.map(this.addQuestion, this)}

由于this在此处引用实际组件，因此组件将作为this传递。然后，这将从组件中正确调用方法addQuestion。一种替代的和功能相同的方法是这样的：

{this.props.questions.map(this.addQuestion.bind(this))}

同样，由于this引用此处的实际组件，因此组件被绑定为方法的this上下文。这意味着，在调用addQuestion时，组件为this，与上述解决方案类似。

我建议的另一件事是，不是每次使用bind创建新函数，而是在构造函数中执行一次：

constructor(/* props if needed */) {
    /* super(props) if needed */
    this.addQuestion = this.addQuestion.bind(this);
}

这样，绑定方法已经this.addQuestion。然后，您可以删除所有bind(this)，但在绑定参数时保留bind(this, question)。

React Component的onClick处理程序没有绑定到“this”

2 个答案: