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

我无法使菜单项连接到事件处理程序。这是用户界面的一个模拟，显示随着时间的推移状态变化。这是一个下拉菜单（通过引导），根菜单项显示当前选择：如何在React子组件中设置事件处理程序

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

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

作为一个便笺，我并不满意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作用域的朦胧认识是难辞其咎的，但一切到目前为止，我已经尝试已经失败（包括试图通过道具向下传递处理器）。

来源

2014-01-09 clozach

问题是您正在使用匿名函数创建项目节点，并且其中this表示window。解决方法是将.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>; 
})

来源

2014-01-09 04:52:05 tungd

+15

您也可以通过'map'的'this'第二个参数，它会作为在其中执行上下文中使用映射函数。 –

辉煌。非常感谢！我最终将函数参数分解为'map'，以使得'this'作为第二个参数更具可读性：'var itemNodes = this.state.items.map（this.itemNode，this）;' – clozach

@ clozach-如果这回答你的问题，你能接受答案吗？ – imjared

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

回答

相关问题