Javascript 反应组分'；s onClick处理程序未绑定到"；这"；

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

尽管我尝试绑定到“this”，但在开发工具控制台中仍然会出现一个错误，即“无法读取属性askQuestion of undefined”。我很确定这个错误意味着askQuestion没有正确绑定到组件的上下文。我需要帮助把问题装订好

以下是组件：

class Questions extends Component {
  askQuestion(question) {
    alert("hello");
  }

  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>
    );
  }
  render() {
    return (
      <div id="questions" className="row">
        <h2>Questions</h2>
        {this.props.questions.map(this.addQuestion)}
      </div>
    );
  }

类问题扩展组件{
提问（问题）{
警惕（“你好”）；
}
添加问题（问题，索引）{
返回(
{问题}
);
}
render（）{
返回(
问题
{this.props.questions.map（this.addQuestion）}
);
}

---

}我认为在React中执行此操作的正确方法是将其绑定到构造函数中

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

---

解释

问题是使用，除非明确告知，否则不会绑定此，而回调的上下文又未定义。从文件中：

如果向

map

提供了

thisArg

参数，则调用时会将该参数传递给callback，以用作其此值否则，未定义的值将作为其

此

值传递使用。（强调矿山）

其中，

thisArg

是

map

的可选参数，请参阅。这意味着，当您这样做时：

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

调用

this.addQuestion

时，this上下文未定义，因此在调用

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>
  );
}

由于

undefined

没有函数

addQuestion

，因此引发错误

---

解决方案

同样，从文档中：

语法

var new\u array=arr.map（回调[，thisArg]）

thisArg

可选。值，在执行回调时用作此值

您可以看到，我们可以显式地将

此

上下文传递给

映射

，以用作回调中的

此

上下文。这意味着我们可以在函数中传递一个额外的参数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。然后，您可以去掉所有的

绑定（this）

s，但保留您的

绑定（this，question）

，就像绑定参数一样。

因此，我通过将this.addQuestion绑定到“this”来实现这一点，比如：this.props.questions.map（this.addQuestion.bind（this）}有人理解为什么这样做吗？

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