在React表格中插入按钮可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
const Table = () => {
const [data, setData] = useState([
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 35 }
]);
const handleDelete = (id) => {
// 根据id删除数据
const updatedData = data.filter(item => item.id !== id);
setData(updatedData);
};
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{data.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.age}</td>
<td>
<button onClick={() => handleDelete(item.id)}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
);
};
export default Table;
在上述示例中,我们创建了一个简单的表格组件,并在每一行的最后一列插入了一个"Delete"按钮。点击按钮时,会调用handleDelete函数删除对应行的数据。
这只是一个简单的示例,你可以根据实际需求进行更复杂的操作和样式设计。如果需要更多关于React的学习资源,你可以参考腾讯云的React相关产品和文档:
请注意,以上只是示例代码和相关产品介绍,具体的实现方式和推荐的产品可能因实际需求和场景而异。
领取专属 10元无门槛券
手把手带您无忧上云