将菜单项连接到事件处理程序时遇到麻烦。这是UI的模拟，显示状态随时间的变化。它是一个下拉菜单(通过Bootstrap)，根菜单项显示当前选择：
[ANN]<click ... [ANN] ... [BOB]<click ... [BOB]
[Ann] [Ann]
[Bob]<click + ajax [Bob]
[Cal] [Cal]
最终目标是根据用户的选择异步地更改页面内容。点击Bob应该触发handleClick，但不是。
作为一个附注，我对组件DidMount调用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范围的朦胧理解是责怪的，但是我迄今尝试的一切都失败了(包括尝试通过道具传递处理程序)。
问题是您正在使用匿名函数创建项目节点，其中，这意味着该窗口。该修复是将.bind(this)添加到匿名函数。
var itemNodes = this.state.items.map(function (item) {
return <li key={item}><a href='#' onClick={this.handleClick}>{item}</a></li>;
}.bind(this));
或者创建一个这样的副本，并使用它：
var _this = this,itemNodes = this.state.items.map(function (item) {
return <li key={item}><a href='#' onClick={_this.handleClick}>{item}</a></li>;
})
