在React.js中制作动态表,可以通过以下步骤实现:
以下是一个简单的示例代码:
import React, { useState } from 'react';
const DynamicTable = () => {
const [data, setData] = useState([]);
const handleAddRow = () => {
// 添加新行的逻辑
const newRow = { id: data.length + 1, name: 'New Row' };
setData([...data, newRow]);
};
const handleDeleteRow = (id) => {
// 删除行的逻辑
const updatedData = data.filter((row) => row.id !== id);
setData(updatedData);
};
return (
<div>
<button onClick={handleAddRow}>添加行</button>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>
<button onClick={() => handleDeleteRow(row.id)}>删除</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default DynamicTable;
这个示例代码实现了一个简单的动态表格,包括添加行和删除行的功能。点击"添加行"按钮可以在表格中添加一行数据,点击"删除"按钮可以删除对应的行数据。
在实际应用中,可以根据具体需求进行扩展和优化。例如,可以添加表单输入框来编辑行数据,可以使用React Router实现表格的分页和筛选功能,可以使用Redux或其他状态管理库来管理表格的数据等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云