4

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

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()？

4

2 回答 2

4

您的问题是，this.onLanguageChange它没有引用正确的处理程序，因为函数this内部language是未绑定的，因此当它执行时指向全局对象（即window）。你可以做一些事情来修复它：

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

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

于 2014-01-24T18:31:38.477 回答
3

reactjs 文档中有一个非常有用的示例 http://facebook.github.io/react/tips/communicate-between-components.html

他们基本上做这样的事情..

return (
  {this.state.languages.map(function(langauge, i){
   return (
     <li><label>
        <input type="checkbox" value={language} onChange={this.onLanguageChange.bind(this, i)} /> 
        {language} ({_languages_total[language]})
      </label></li>
   )
  }, this)
 }
)
于 2014-05-05T00:57:05.490 回答