React v.18.0 - 通过 .map 函数构建多个输入进行编辑

Question

要求仅编辑属性值列。此动态输入是通过

.map

函数构建的。只有在双击期间，该值才应变为可编辑，而其他地方的 onClick 则应变为只读。

问题陈述：

1. 双击值时，所有属性值都变为可编辑。这不应该发生。只有双击的单元格才应变为可编辑，其余单元格应为只读。

2. 在Actions栏下，有4个按钮，保存、删除、信息和取消。这些操作应仅适用于编辑的属性值单元格，不应适用于其他单元格。

尝试 1：我尝试使用基于索引值的元素的动态 ID，但我仍然使用应用于所有行的通用状态。

尝试 2：我尝试使用

event.current

和

event.currentTarget

，但它仍然适用于所有行。

我已在 stackblitz 中部署了代码，请查看它并发表评论，如果您需要任何输入来帮助我。

编码器视图：https://stackblitz.com/edit/react-kzog2m

最终用户视图：https://react-kzog2m.stackblitz.io/

双击编辑中间栏-属性值

Answer 1

已为您解决了

https://stackblitz.com/edit/react-eaomjw

您所做的问题是您在编辑时没有检查任何索引 基本上你只是看到它们都是可编辑的

但不是让编辑布尔值 true 或 false 您在单击的行的索引中分配 您可以知道哪一行被按下，并且只有在查看其余行时才能编辑它