子组件中的 onClick 操作发送错误的元素

Posted 2023-02-23

【中文标题】子组件中的 onClick 操作发送错误的元素

【英文标题】：onClick action in child component is sending wrong element

【发布时间】：2019-10-24 07:05:46

【问题描述】：

我正在尝试使用 MateralizeCss 渲染一些包含一些可折叠的子组件，并且在每个可折叠的内部存在三个选项卡，并且在每个选项卡上都有一个按钮，并且每个可折叠标题都分配了一个我通过的名称道具。

现在在每个按钮的 OnClick 事件上，我调用一个函数，该函数使用选中的选项卡（“简单”、“中”或“硬”）更新子组件的状态，类似于 this.setState(active: this.button.parentname) 并返回可折叠的父项的名称，但问题是返回的名称不是正确的名称，它是第一次呈现的第一个子项。

为了理解这一点，假设我的父组件中有状态。

category: [

    "name": 1, .. some other properties, // data of first collapsible 
    "name": 2, .. some other properties, // second

]

最初，状态是空的，但后来该类别被异步填充，但我已经处理了。

所以我这样渲染，

<ul className="collapsible">
     this.state.category.length > 0 ? (this.state.category.map(((category, key) => (
    <CategoryCollapsible key=key category=category get_name=this.get_name />
   )))) : null
</ul>

在子组件方面，我只有 <li> 标记，其中可折叠标题的名称为 this.props.category.name。

在正文中，我只有上面定义的带有 onClick 按钮的选项卡，即返回可折叠的标题名称。

那么，这可能是什么原因？ 为什么 react 在两个渲染的子组件之间会混淆？

我还使用ComponentDidMount() 检查了道具，道具是正确的，但是一旦 onClick 事件发生，道具就变成了第一个？ 这是什么魔法？ 有什么猜测吗？

【问题讨论】：

您介意在 CodePen 或 CodeSandbox 中提供一些伪代码吗？

好的，我一会儿再说。

甜蜜！.. 谢谢

@MattOestreich 我试图在 CodeSandbox 上复制我的问题，但看起来 materalize 导致了跨域问题codesandbox.io/s/boz91?fontsize=14 这是链接

很高兴你能把它修好！感谢更新

【参考方案1】：

好的，我修好了，实际上每个可折叠的都需要一个唯一的ID，所以我只是把name作为可折叠的ID。

总而言之，我们可以推断出每个功能（元素）子组件必须有一个唯一的 id 来识别它们，以便任何功能来识别它们。