以下是一个简单的可
编辑表格的示例代码，使用
React Hook和
Antd组件库：
```
javascript
import
React, { useState } from '
react';
import {
Table, Input, InputNumber, Popconfirm, Form } from '
antd';
const Edi
tableCell = ({
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
}) => {
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
rules={[
{
required: true,
message: `Please Input ${title}!`,
},
]}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};
const Edi
tableTable = () => {
const [form] = Form.useForm();
const [data, setData] = useState([
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]);
const [editingKey, setEditingKey] = useState('');
const isEditing = (record) => record.key === editingKey;
const edit = (record) => {
form.setFieldsValue({
name: '',
age: '',
address: '',
...record,
});
setEditingKey(record.key);
};
const cancel = () => {
setEditingKey('');
};
const save = async (key) => {
try {
const row = await form.validateFields();
const newData = [...data];
const index = newData.findIndex((item) => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
setData(newData);
setEditingKey('');
} else {
newData.push(row);
setData(newData);
setEditingKey('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
width: '25%',
edi
table: true,
},
{
title: 'Age',
dataIndex: 'age',
width: '15%',
edi
table: true,
},
{
title: 'Address',
dataIndex: 'address',
width: '40%',
edi
table: true,
},
{
title: 'Action',
dataIndex: 'action',
render: (_, record) => {
const edi
table = isEditing(record);
return edi
table ? (
<span>
<a
href="
javascript:;"
onClick={() => save(record.key)}
style={{ marginRight: 8 }}
>
Save
</a>
<Popconfirm title="Sure to cancel?" onConfirm={cancel}>
<a>Cancel</a>
</Popconfirm>
</span>
) : (
<a disabled={editingKey !== ''} onClick={() => edit(record)}>
Edit
</a>
);
},
},
];
const mergedColumns = columns.map((col) => {
if (!col.edi
table) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
}),
};
});
return (
<Form form={form} component={false}>
<
Table
components={{
body: {
cell: Edi
tableCell,
},
}}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="edi
table-row"
pagination={{
onChange: cancel,
}}
/>
</Form>
);
};
export default Edi
tableTable;
```
这个表格组件的主要思路是：
1. 使用`useState` Hook来保存表格
数据和当前正在
编辑的行的key。
2. 创建一个可
编辑的单元格组件`Edi
tableCell`，根据`editing`属性来展示
编辑状态或者展示状态。当
编辑状态时，渲染一个`
antd`的`Form.Item`，提供一个可
编辑的输入框。
3. 创建一个可
编辑的表格组件`Edi
tableTable`，渲染一个`
antd`的`
Table`组件。
4. 在表格的每一列中添加一个`edi
table`属性，表示该列是否可
编辑。对于可
编辑的列，使用`onCell`属性指定可
编辑单元格的属性。
5. 在渲染表格的每一行时，根据当前行是否处于
编辑状态来决定展示
编辑状态还是展示状态。如果处于
编辑状态，则渲染可
编辑的单元格，否则渲染非可
编辑的单元格。
6. 在表格中添加
编辑和保存
按钮，
点击编辑按钮时进入
编辑状态，
点击保存
按钮时保存修改。同时，保存和取消操作会将当前行的
编辑状态取消。
这样，我们就完成了一个简单的可
编辑表格。
最低0.47元/天 解锁文章
4639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
