Question

export default React.createClass({
displayName: 'Test',

getInitialState() {
    return {
        activeItem: 0,
    };
},

onItemClick(item) {
    this.setState({
        activeItem: item
    });
},

isActive(item) {
    return item === this.state.activeItem;
},

render() {
    var circle = {
        'one': {
            items: []
        }
    };

    ['one'].forEach((k, i) => {
        for (var j = 1; j <= 3; j++) {
            var itemNo = (i * 10 + j);
            var itemClasses = c('item', 'item-' + itemNo, {
                'selected': this.isActive(itemNo)
            });

            var item = React.DOM.div({
                key: "item" + itemNo,
                className: itemClasses,
                onClick: () => this.onItemClick(itemNo)
            }, itemNo);
            circle[k].items.push(item);
        }
    });


    return ( 
      <div>{circle.one.items}</div>
    );
}
});

动态生成的div正在填充circle.one.items数组，并且应该包含：

<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>

无论我点击什么div，只有第3个被选中，因为itemNo最后一个值是3。

看看：onClick: () => this.onItemClick(itemNo)。这是错的。如何将我点击的div的ID传递给onItemClick()？

Answer 1

顺便说一句，你有一个closure issue，快速解决方法是使用函数迭代更改for语句：

＆＃13;

var circle = {
  'one': {
    items: [1, 2, 3].map((item, index, array) => React.DOM.div({
      onclick: () => console.log('clicked at', index, item);
    }))
  }
};

＆＃13;

Answer 2

阅读JavaScript closure inside loops – simple practical example后，最简单的解决方法是使用let。我刚刚用var itemNo = (i * 10 + j);更改了let itemNo = (i * 10 + j);。

ReactJS传递给onClick函数当前div ID

2 个答案: