ReactJS:.map(数组)中的事件未触发

Question

在我的 render 函数中，我想显示一个基于数组的列表，虽然显示它工作正常，但似乎我绑定(bind)到它的任何事件都被忽略了。

render: function() {
  var language = function(language) {
    return (
      <li><label>
        <input type="checkbox" value={language} onChange={this.onLanguageChange} /> 
        {language} ({_languages_total[language]})
      </label></li>
    )
  }

  return (
    <ul className="filter__list">
      <li><label>
        <input type="checkbox" value="0" onChange={this.onLanguageChange} />
        0 (2)
      </label></li>
      {this.state.languages.map(language)}
    </ul>
  )
}

我直接在 .map 外部渲染了一个列表项，看看它是否会给出任何结果，这似乎是唯一有效的。

我只是错过了一些明显的东西，还是当事件放置在 return() 之外时被忽略？

Answer 1

您的问题是 this.onLanguageChange 没有引用正确的处理程序，因为 language 函数中的 this 未绑定(bind)，因此当它执行时指向全局对象(即window)。您可以采取一些措施来修复它:

1. 在定义语言之前添加var self = this;并引用self.onLanguageChange。
2. 在您分配给 render 的函数后面添加 .bind(this)。
3. 调用.map(language, this)来告诉map在调用language时使用什么上下文。这是最简单、最干净的解决方案。

如果您不熟悉 JavaScript 的作用域规则以及 this 的工作原理，我建议您阅读一下。