在 for 循环中创建元素时不会触发 React onClick 事件答案

【问题标题】：React onClick event is not fired when element is created in for loop在 for 循环中创建元素时不会触发 React onClick 事件
【发布时间】：2015-12-13 08:25:09
【问题描述】：

我整天都在尝试解决这个奇怪的问题，但没有成功。这是我尝试 React 的第一天，所以也许我遗漏了一些东西。

ParentComponent.cjsx

module.exports = React.createClass
    getInitialState: ->
        {
            items: []
        }

    componentDidMount: ->
        request.get(constants.API_ROOT + @props.source)
               .end((err, res) =>
                    @setState({items: res.body})
        )

    render: ->
        `
        // First try: DOES NOT WORK
        var items = [];
        for(var i = 0; i < this.state.items.length; i++) {
            var item = this.state.items[i];
            items.push(<ChildItem key={item.id} id={item.id} name={item.name} src={item.image_url_640x480} />)
        }
        console.log(['items1', items]);

        // Second try: DOES NOT WORK
        var origThis = this;
        var items2 = this.state.items.map(function (item) {
            return (<ChildItem key={item.id} id={item.id} name={item.name} src={item.image_url_640x480} />);
        }.bind(origThis), origThis);
        console.log(['items2', items2]);

        `

        // Creating elements by hand (WORKS, but not helpful at all)
        items3 = [
            <ChildItem key=23 id=31 name='ddd' src='adasdas' />,
            <ChildItem key=12 id=13 name='bg' src='/media/cache/de/ba/deba6d1545e209b0416b501c61fe031f.jpg' />
        ]
        console.log(items3)
        <div id="image-layer-selector" className="pure-g">{items1} {items2} {items3}</div>

ChildItem.cjsx

module.exports = React.createClass
    getInitialState: ->
        selected: false

    handleClick: ->
        console.log 'clicked'
        @setState selected: true


    render: ->
        elemClasses = classnames('pure-u-1-2', 'selector-element', {'selected': @state.selected})
        <div className={elemClasses} onClick={@handleClick}>
            {@props.name} - {@props.id}
            <img className="pure-img" src={constants.API_ROOT + @props.src}/>
        </div>

ChildItem onClick 处理程序仅在手动设置元素时触发。我错过了什么？我在 .cjsx、纯 .jsx、.map 函数、纯 JS for 循环等中尝试了很多可能的方法。这些方法似乎都不起作用。控制台不包含任何错误。

使用反应 13.3。

编辑。似乎只有在使用setState 在componentDidMount 中设置项目时，onClick 处理程序才起作用。没有解决方案的相同问题在这里：React - Attaching click handler to dynamic children

【问题讨论】：

标签： coffeescript reactjs

【解决方案1】：

终于找到问题了。我没有做任何更深入的调查为什么这不起作用，但问题是在我的主文件中我将 React 导入为require('React')，但在其他组件上导入为require('React/addons')。从react/addons 到处导入 React 后，一切都按预期工作。

【讨论】：