数组中具有onClick属性的Button元素，以更改所单击的特定按钮的状态

Question

我有一个按钮数组，它使用.map来打印数据表中的行。每一行都有触发"编辑"面板弹出窗口的按钮。我目前遇到的问题是，当单击一个按钮时，所有行上的"编辑"面板。

代码：

const [showEdit, setShowEdit] = useState([]);
<tbody>
{appSettingsList.map((appSettings, i) => (
<tr key={i}>
<td>{appSettings.Name}</td>
<td>{appSettings.BackgroundColor}</td>
<td>{appSettings.FontSize}</td>
<td>{appSettings.FontFamily}</td>
<td>{appSettings.Theme}</td>
<td>{appSettings.NavigationBar}</td>
<td className="action-column">
<button
key={i}
className="button-green"
onClick={() => setShowEdit(!showEdit)}
>
Edit
</button>
</td>
<td>{showEdit ? <EditApplicationSettings /> : null}</td>
</tr>
))}
</tbody>

如何使每个按钮具有不同的状态？

Answer 1

您的状态应该是活动行的索引

const [activeIndex, setActiveIndex] = useState(null);
<tbody>
{appSettingsList.map((appSettings, i) => (
<tr key={i}>
<td>{appSettings.Name}</td>
<td>{appSettings.BackgroundColor}</td>
<td>{appSettings.FontSize}</td>
<td>{appSettings.FontFamily}</td>
<td>{appSettings.Theme}</td>
<td>{appSettings.NavigationBar}</td>
<td className="action-column">
<button
key={i}
className="button-green"
onClick={() => setActiveIndex(i)}
>
Edit
</button>
</td>
<td>{activeIndex === i ? ( <button key={i} className="button-green" onClick={() => setActiveIndex(null)} > Edit </button> ) : ( <button key={i} className="button-green" onClick={() => setActiveIndex(i)} > Edit </button> )}</td>
</tr>
))}
</tbody>

Answer 2

您需要独立处理每一行的编辑逻辑。

1. 使用切换编辑视图逻辑创建TableRow组件

const TableRow = ({ appSettings, i }) => {
const [showEdit, setShowEdit] = useState([]);
return (
<tr key={i}>
<td>{appSettings.Name}</td>
<td>{appSettings.BackgroundColor}</td>
<td>{appSettings.FontSize}</td>
<td>{appSettings.FontFamily}</td>
<td>{appSettings.Theme}</td>
<td>{appSettings.NavigationBar}</td>
<td className="action-column">
<button
key={i}
className="button-green"
onClick={() => setShowEdit(!showEdit)}
>
Edit
</button>
</td>
<td>{showEdit ? <EditApplicationSettings /> : null}</td>
</tr>
);
};

2. 在TableRow元素上迭代

<tbody>
{appSettingsList.map((appSettings, i) => (
<TableRow appSettings={appSettings} i={i} />
))}
</tbody>