当在for循环中创建元素时，不会触发React onClick事件 [英] React onClick event is not fired when element is created in for loop

问题描述

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

I was trying to solve this strange problem all day, but didn't managed to. This is one of the first days I am trying out React, so maybe I am missing something.

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的循环等。这些都没有工作。控制台不包含任何错误。

ChildItem onClick handler is fired only when elements are set by hand. What am I missing? I tried a lot of possible ways in .cjsx, plain .jsx, .map function, plain JS for loop etc. None of these seemed to work. Console doesn't contain any errors.

使用react 13.3。

Using react 13.3.

编辑。似乎onClick处理程序不工作只有当项目设置在 componentDidMount 使用 setState 。没有解决方案的相同问题在这里： React - 将点击处理程序附加到动态子项

EDIT. Seems like onClick handler doesn't work only when items are set in componentDidMount using setState. Identical problem without solution is here: React - Attaching click handler to dynamic children

推荐答案

终于找到了问题。我没有做任何深入的调查，为什么这没有工作，但问题是，在我的主要文件我导入React作为 require（'React'），但on其他组件为 require（'React / addons'）。从 react / addons 导入React后，一切都会按预期工作。

Finally found the problem. I haven't done any deeper investigation why this didn't work, but the problem was that in my main file I imported React as require('React'), but on other components as require('React/addons'). After importing React everywhere from react/addons everything works as expected.

这篇关于当在for循环中创建元素时，不会触发React onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！