ReactJS：onClick in子組件不會觸發

Question

我正在嘗試在JSX中創建一個子組件，它是一個帶有onClick事件和事件處理程序的項目列表。 永遠不會調用事件處理程序。 請幫我弄清楚我做錯了什么。

• React Chrome開發人員工具擴展程序顯示為每個“li”創建的“onClick”事件處理程序
• 上下文（this）是“構造函數”對象，它具有“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
                    )
                )
            );
    }
});

Answer 1

您希望在componentDidMount中調用server / ajax，而不是componentWillMount。 您可以在此處的文檔中查看React Component Lifecycle的原因

Answer 2

如果你添加一個self = this會發生什么？ 並將this.handleClick更改為self.handleClick？

render：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);

Answer 3

也許使用回調函數。 在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>
        );
}
});