如何使用React从HTML表中删除一行

Question

我正试图使用React删除HTML表中的一行。我想删除的行中的删除按钮上有一个onClick处理程序，但我如何将该特定行作为删除目标？我传递了一个具有唯一id属性的site变量。也许这有帮助？

// table component
export default function IndexPage() {
const site = { id: 123 };
const removeSite = async ({ id, e }) => {
console.log(e.target);
};
return (
<table>
<tbody>
<tr>
<th>Name</th>
</tr>
<tr>
<td>Valles Caldera National Preserve</td>
<button onClick={(e) => removeSite(site,e )}>Delete</button>
</tr>
</tbody>
</table>
);
}

这里有一个代码沙盒的链接。

Answer 1

实现这一点的更好方法是使用数组进行显示，并为单个行项目提供id->

你的代码将是这样的->

const [dataArray, setDataArray] = useState([
{ name: "Valles Caldera National Preserve", id: 1 },
{ name: "Tyler Morales", id: 2 },
]);
const removeSite = async (id) => {
setDataArray((data) => data.filter((dataEach) => dataEach.id !== id));
};
return (
<table>
<tbody>
<tr>
<th>Name</th>
</tr>
{dataArray.map((data) => (
<tr key={data.id}>
<td>{data.name}</td>
<button onClick={(e) => removeSite(data.id)}>Delete</button>
</tr>
))}
</tbody>
</table>
);

Answer 2

如果没有更多信息，我假设您计划映射数据以生成每一行。

如果您使用API来获取数据，您可以利用useEffect钩子来获取数据并将其设置为状态变量，使用useState钩子来管理可见行，例如：

export default function IndexPage() {
const [sites,setSites] = [];
useEffect(()=>{
// Fetch your data here and pass it to setSites to set state
// For example, setState([{ id: 123,name:"Valles Caldera National Preserve" }]) 
},[])
const removeSite = async ({ id, e }) => {
// Below we update state to be the original array, less the clicked row
setSites(sites.filter(site =>site.name !== id));
};
return (
<table>
<tbody>
<tr>
<th>Name</th>
</tr>
{map.sites((site) => {
return (
<tr>
<td>{site.name}</td>
<button onClick={(e) => removeSite(site.id, e)}>Delete</button>
</tr>
);
})}
</tbody>
</table>
);
}

Answer 3

React任何更新的最佳模式都是使用state变量。因此，如果您需要更新表，您应该使用状态数组变量来存储表的行的数据，例如tableRows，并使用.map()从该变量创建表行。现在，如果您使用例如setTableRows([...newVariable])更新此变量，这将自动更新您的表。

根据您的更新进行更新：

应该这样更新你的代码：

export default function IndexPage() {
const [sites, setSites] = [{ id: 123,name:"Valles Caldera National Preserve" }];
const removeSite = (id) => {
// do more staff like deleting from database
// you may need to iterate through new array, because direct updating of state array variables do not force to re-render because of some reasons.
setSites([...sites.filter(site => site.name !== id)]);
};
return (
<table>
<tbody>
<tr>
<th>Name</th>
</tr>
{map.sites((site) => {
return (
<tr>
<td>{site.name}</td>
<button onClick={() => removeSite(site.id)}>Delete</button>
</tr>
);
})}
</tbody>
</table>
);
}