onclick - 如何在React子组件中设置事件处理程序

Question

我在将菜单项连接到事件处理程序时遇到问题。这是 UI 的模拟，显示状态随时间的变化。这是一个下拉菜单(通过 Bootstrap)，根菜单项显示当前选择:

[ANN]<click  ...  [ANN]             ...    [BOB]<click  ...  [BOB]  
                    [Ann]                                      [Ann]
                    [Bob]<click + ajax                         [Bob]
                    [Cal]                                      [Cal]

最终目标是根据用户的选择异步更改页面内容。单击 Bob 应该会触发 handleClick，但事实并非如此。

顺便说一句，我对 componentDidMount 调用 this.handleClick(); 的方式不太满意，但它目前可以作为从服务器获取初始菜单内容的一种方式。

/** @jsx React.DOM */

var CurrentSelection = React.createClass({
  componentDidMount: function() {
    this.handleClick();
  },

  handleClick: function(event) {
    alert('clicked');
    // Ajax details ommitted since we never get here via onClick
  },
  getInitialState: function() {
    return {title: "Loading items...", items: []};
  },
  render: function() {
    var itemNodes = this.state.items.map(function (item) {
      return <li key={item}><a href='#' onClick={this.handleClick}>{item}</a></li>;
    });

    return <ul className='nav'>
      <li className='dropdown'>
        <a href='#' className='dropdown-toggle' data-toggle='dropdown'>{this.state.title}</a>
        <ul className='dropdown-menu'>{itemNodes}</ul>
      </li>
    </ul>;
  }
});


$(document).ready(function() {
  React.renderComponent(
    CurrentSelection(),
    document.getElementById('item-selection')
  );
});

我几乎确信我对 javascript 作用域的模糊理解是罪魁祸首，但到目前为止我尝试过的一切都失败了(包括尝试通过 props 传递处理程序)。

Answer 1

问题是您正在使用匿名函数创建项目节点，而其中的 this 表示窗口。修复方法是将 .bind(this) 添加到匿名函数。

var itemNodes = this.state.items.map(function (item) {
  return <li key={item}><a href='#' onClick={this.handleClick}>{item}</a></li>;
}.bind(this));

或者创建 this 的副本并使用它:

var _this = this, itemNodes = this.state.items.map(function (item) {
  return <li key={item}><a href='#' onClick={_this.handleClick}>{item}</a></li>;
})