如何仅选择 .map() 的一个元素？答案

【问题标题】：How to select only one element of a .map()?如何仅选择 .map() 的一个元素？
【发布时间】：2019-01-14 15:53:52
【问题描述】：

我有一个 .map() 函数，它根据从 woocommerce api 中提取的产品数量返回我想呈现的这些按钮。我还有一个 onclick 功能，当只选择一个按钮时，className 会切换。

但是，通过脚本，我选择了数组的所有元素。我很熟悉，我必须将我独特的 key={} 传递给函数以获得我想要的结果，但我在这样做时遇到了麻烦：/ 这是我没有尝试的代码 https://codesandbox.io/s/018488478p 。

我看过这些以前的问题： How to toggle class for the only one element on click in react How to modify only one element in a react .map function? 但由于某种原因，我无法将它复制到我的代码中 - 我对这一切都很陌生，所以如果它很容易解决，请原谅我的无知！

当切换发生时，我的 div 怎么会扩展，这很烦人？ :( 你认为我使用单选按钮更好吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我喜欢这样的情况，我喜欢跟踪状态中的选定元素，如下所示： https://codesandbox.io/embed/rm8n26po1q

更新：我更新了沙箱，不包括 id，以及其他一些改进

【讨论】：

这太棒了@Filtenborg！正是我想要的。一个问题，你为什么还要在函数中传递id：handleSelectL1(id, i)。我仍在学习这一切。我知道你传递了两个参数，但为什么还要id？
哦，你不需要那个，你可以直接删除它，记得从你的 handleSelects 中删除它

【解决方案2】：

在您的状态下，您将 showL1 设置为 true 或 false，这意味着他们都会获得样式。在您的 handleSelectL1 中，您应该设置一个名为“selectedItemId”或类似状态的键，并将其设置为您传入的 id。然后在 className 中您可以使用className={this.state.selectedItemId === p.id ? "selectedRBox" : "selectorRBox"

【讨论】：

您好，感谢@lysdexic 的回复！嗯，但我有点困惑。因此，我是否将其添加到构造函数 selectedItemId : " ", 中，然后按照您在回复中的说明简单地调用它。如何将selectedItemId 添加到handleSelectL1？我对这个领域不是很熟悉，因为我还在学习。
你在方法中传入 id 所以只需使用this.setState({ selectedItemId: id })

【解决方案3】：

看起来您正在尝试读取产品的 ID，但您从未设置其 ID。为您的每个产品添加 id 属性

【讨论】：

感谢@yewhral！但我不完全确定如何做到这一点，因此请你给我举个例子