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

Posted 2023-03-17

【中文标题】onClick() 事件适用于一个 div，但不适用于另一个。为啥？

【英文标题】：An onClick() event works on one div, but not another. Why?onClick() 事件适用于一个 div，但不适用于另一个。为什么？

【发布时间】：2021-12-10 19:13:05

【问题描述】：

使用 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

【参考方案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，它改变了整个类的状态，所以我在哪里改变状态并不重要。这样，只有具有正确 imageName 的项目才会更改状态。