Question

我试图整天解决这个奇怪的问题，但没有成功。这是我尝试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，plain .jsx，.map函数，普通JS for循环等中尝试了很多可能的方法。这些似乎都没有用。控制台不包含任何错误。

使用反应13.3。

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

Answer 1

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

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

1 个答案: