React onClick event is not fired when element is created in for loop

问题

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 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.

Using react 13.3.

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

回答1:

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.

来源：https://stackoverflow.com/questions/32613863/react-onclick-event-is-not-fired-when-element-is-created-in-for-loop

标签

coffeescript

reactjs