ReactJS：子组件中的onClick事件不触发

Question

我正在尝试在JSX中创建一个子组件，它是一个带有onClick事件和事件处理程序的项目列表。但是事件处理程序从未被调用。请帮我找出我做错了什么。

• React Chrome开发者工具扩展显示为每个"li"创建了一个"onClick"事件处理程序
• 上下文(this)是"Constructor"对象，该对象具有"handleClick"函数作为属性。

编辑： 感谢@FakeRainBrigand，我发现问题出在其他地方。 我发现当我使用父组件中的事件处理程序隐藏/显示子组件时，它停止触发onClick事件处理程序，因为父级的隐藏操作会触发。 JSBIN

JSX代码:

var FilterList = React.createClass({
    handleClick: function(e){
        console.log(e);

    },
    render: function(){
        var ListItems = this.props.data.map(function(item){
            return (
                <li key={item.id} className="filter-item" onClick={this.handleClick}>
                    <span key={'img'+item.id} className={item.imgClass}></span>
                    <span key={'text'+item.id} className="item-text">{item.name}</span>
                </li>
            )

        }, this);
        return (
            <div className="filter-list">
                    <ul>
                        {ListItems}
                    </ul>
                </div>
            );
    }
});

生成的JS代码：

var FilterList = React.createClass({displayName: 'FilterList',
    handleClick: function(e){
        console.log(e);


    },
    render: function(){
        var ListItems = this.props.data.map(function(item){
            return (
                React.DOM.li( {key:item.id, className:"filter-item", onClick:this.handleClick}, 
                    React.DOM.span( {key:'img'+item.id, className:item.imgClass}),
                    React.DOM.span( {key:'text'+item.id, className:"item-text"}, item.name)
                )
            )

        }, this);
        return (
            React.DOM.div( {className:"filter-list"}, 
                    React.DOM.ul(null, 
                        ListItems
                    )
                )
            );
    }
});

- abhinav

---

你的问题出在其他地方。这段代码可以工作。 - Brigand

感谢提供 jsbin 示例。我看到它在工作，但是我已经彻底迷失了。完整的代码与 jsbin 相同，但我正在使用 ComponentWillMount 从服务器获取 data。有任何想法在哪里寻找？我可以重写部分代码。任何线索都可以，我已经卡在这个问题上一整天了。 - abhinav

你使用的是这种大小写格式吗，“ComponentWillMount”？函数应该以小写字母“c”开头：componentWillMount。 - Ross Allen

Answer 1

如果您添加了self = this;并将this.handleClick更改为self.handleClick会发生什么？

渲染：function() {

    self = this;
    var ListItems = this.props.data.map(function(item){

        return (
            <li key={item.id} className="filter-item" onClick={self.handleClick}>
                <span key={'img'+item.id} className={item.imgClass}></span>
                <span key={'text'+item.id} className="item-text">{item.name}</span>
            </li>
        )

    }, this);

- maplechori

Answer 2

或许可以使用回调函数。在onclick上使用回调函数，像这样：

var FilterList = React.createClass({
handleClick: function(e){
    console.log(e);

},
render: function(){
    var ListItems = this.props.data.map(function(item){
        return (
            <li key={item.id} className="filter-item" onClick={() => this.handleClick}>
                <span key={'img'+item.id} className={item.imgClass}></span>
                <span key={'text'+item.id} className="item-text">{item.name}</span>
            </li>
        )

    }, this);
    return (
        <div className="filter-list">
                <ul>
                    {ListItems}
                </ul>
            </div>
        );
}
});

- Khorram Bin Salim Khondkar

Answer 3

你应该在componentDidMount中进行服务器/ajax调用，而不是在componentWillMount中。你可以在这里的文档React组件生命周期中查看原因。

- captray