Javascript 如何仅选择.map（）的一个元素？

我有一个

.map（）

函数，它返回我想根据从woocommerce api中提取的产品数量呈现的这些按钮。 我还有一个onclick函数，当只选择一个按钮时，

className

会切换

但是，通过脚本，我选择了数组的所有元素。我很熟悉，我必须将我唯一的

key={}

传递给函数以获得我想要的结果，但我在这样做时遇到了困难：/这是我没有尝试的代码

我已经看了前面的这些问题： 但出于某种原因，我无法将其复制到我的代码中——我对这一切都很陌生，所以请原谅我的无知，如果这是一个简单的解决方法

还有，当切换发生时，我的div为什么会扩展？这很烦人：(

---

您认为我使用单选按钮更好吗？

看起来您试图读取产品的id，但从未设置其id。在您的状态下，将showL1设置为true或false，这意味着它们都将获得样式。在handleSelectL1中，您应该在状态中设置一个名为“selectedItemId”的键或者类似的，并将其设置为您要传递的id。然后在className中，您可以使用

className={this.state.selectedItemId===p.id？“selectedRBox”：“selectorRBox”

我喜欢这样的情况我喜欢跟踪状态中的选定元素，如下所示：

更新：

---

我更新了沙盒，不包括id，还有其他一些改进措施

嗨，谢谢@lysdexic的回复！呃，但我有点困惑。我是不是要将此添加到构造函数

selectedItemId:“，

然后按照您在回答中所述简单地调用它。我如何将

selectedItemId

添加到

handleSelectL1

？我不太熟悉这个区域，因为我还在学习。您在方法中传递id，所以只需使用

this.setState（{selectedItemId:id}）

谢谢@yewhral！但我不完全确定如何做到这一点，因此问题可否请你给我举个例子这是很棒的@Filtenborg！正是我想要的。有一个问题，你为什么在函数中也传递了

id

：

handleselect1（id，I）

。我仍在了解这一切。我知道您正在传递两个参数，但为什么还要传递

id

？哦，您不需要它，您可以删除它，记住也要将其从handleSelects中删除