巧妙实现React中的单行删除按钮

在React开发中，有时候我们需要在用户勾选某个复选框时，只显示该行对应的删除按钮，而不是所有行都显示删除按钮。本文将通过一个具体的示例，展示如何在React中实现这个功能。

背景

假设我们有一个列表，展示了各种体育项目。用户可以勾选某个项目旁的复选框，然后仅显示该项目的删除按钮，点击删除按钮后，该项目将从列表中移除。

实现步骤

1. 初始化状态

首先，我们需要定义一个状态数组来存储每个项目及其是否显示删除按钮的标志。

const [games, setGames] = useState([ { label: 'cricket', showDelete: false }, { label: 'volleyball', showDelete: false }, { label: 'football', showDelete: false } ]);

2. 删除项目的函数

创建一个函数来删除指定索引的项目：

const deleteItem = (itemIndex) => { let removeGame = games.filter((_, i) => i !== itemIndex); setGames(removeGame); };