onClick() 事件适用于一个 div，但不适用于另一个。为什么？

Question

使用 React，我有一个 div 包含信息，另一个 div 在其中包含一个项目列表。我希望第二个 div(列表) 在单击时可折叠。如果我将点击侦听器放入第一个 div，它会工作并显示项目列表。问题在于它显示了所有项目的所有列表。我只想显示被点击项目的列表：

render() {
        return (
            this.state.data.map(item => {
                return (  // If I put onClick={this.showCollapsible} here, all lists are loaded
                    <div id={'imageTableItemComponent'} key={item.imageName}>
                        {item.imageName} -
                        {item.tags.length}
                        <div id={'collapsibleTagList'} key={item.tags} onClick={this.showCollapsible}>
                               // *** This onClick does not get triggered ***
                            {this.state.collapsible && <TagTableComponent data={item} onClose={() => this.hideCollapsible()}/>}
                        </div> 
                    </div>
                )
            })

        )
    }

如果我在 this.showCollapsible() 后添加括号，我会收到此警告：

警告：无法在现有状态转换期间更新（例如在 render 内）。渲染方法应该是 props 和 state 的纯函数。

这里是 showCollapsible 函数：

showCollapsible = () => {
        this.setState( {collapsible: true})
    }

我的列表应该是这样的：

图片1
图片2
图3 -item1, item2, item3 (点击item3时)

在第一个 div 中使用 onClick 侦听器，所有列表都是这样打开的：

image1 -item1, item2
image2 -item1, item2, item3, item4
image3 -item1, item2, item3

Answer 1

所以我改变了一些东西。首先，当我问这个问题时，我的 constructor 看起来像这样：

constructor(props) {
        super(props);
        this.state = {
            data : [],
            collapsible : false,
        }
    }

我已将 collapsible 更改为 null，collapsible: null, 并将我的 showCollapsible 函数更改为如下所示：

showCollapsible = (imageName) => {
        this.setState( {collapsible: imageName})
    }

最后，我在第一个 div 中调用点击侦听器，如下所示：

 render() {
        return (
            this.state.data.map(item => {
                return (
                    <div id={'imageTableItemComponent'} key={item.imageName} onClick={() => this.showCollapsible(item.imageName)}> <!-- This looks fancy, eh? -->
                        {item.imageName} -
                        {item.tags.length}
                        <div id={'collapsibleTagList'} key={item.tags}>
                            {this.state.collapsible === item.imageName && <TagTableComponent data={item} onClose={this.hideCollapsible}/>}
                        </div>
                    </div>
                )
            })

        )
    }

对于以后可能运行遇到这个问题的任何人，请不要像我先做的那样 XD

通过将 collapsible 设置为 true，它改变了整个 class 的状态，所以我在哪里改变状态并不重要。这样，只有具有正确 imageName 的项目才会更改状态。

onClick() 事件适用于一个 div，但不适用于另一个。为什么？

An onClick() event works on one div, but not another. Why?

onclick

reactjs