以下是一个简单的可
编辑表格的示例代码，使用
React Hook和
Antd组件库：
```javascript
import
React, { useState } from '
react';
import { Table, Input, InputNumber, Popconfirm, Form } from '
antd';
const
EditableCell = ({
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={[
{
req
uired: true,
message: `Please Input ${title}!`,
},
]}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};
const
EditableTable = () => {
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, set
EditingKey] = useState('');
const is
Editing = (record) => record.key ===
editingKey;
const
edit = (record) => {
form.setFieldsValue({
name: '',
age: '',
address: '',
...record,
});
set
EditingKey(record.key);
};
const cancel = () => {
set
EditingKey('');
};
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);
set
EditingKey('');
} else {
newData.push(row);
setData(newData);
set
EditingKey('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
width: '25%',
editable: true,
},
{
title: 'Age',
dataIndex: 'age',
width: '15%',
editable: true,
},
{
title: 'Address',
dataIndex: 'address',
width: '40%',
editable: true,
},
{
title: 'Action',
dataIndex: 'action',
render: (_, record) => {
const
editable = is
Editing(record);
return
editable ? (
<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.
editable) {
return col;
}
return {
...col,
onCell: (record) => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: is
Editing(record),
}),
};
});
return (
<Form form={form} component={false}>
<Table
components={{
body: {
cell:
EditableCell,
},
}}
bordered
dataSource={data}
columns={mergedColumns}
rowClassName="
editable-row"
pagination={{
onChange: cancel,
}}
/>
</Form>
);
};
export default
EditableTable;
```
这个表格组件的主要思路是：
1. 使用`useState` Hook来保存表格数据和当前正在
编辑的行的key。
2. 创建一个可
编辑的单元格组件`
EditableCell`，根据`
editing`属性来展示
编辑状态或者展示状态。当
编辑状态时，渲染一个`
antd`的`Form.Item`，提供一个可
编辑的输入框。
3. 创建一个可
编辑的表格组件`
EditableTable`，渲染一个`
antd`的`Table`组件。
4. 在表格的每一列中
添加一个`
editable`属性，表示该列是否可
编辑。对于可
编辑的列，使用`onCell`属性指定可
编辑单元格的属性。
5. 在渲染表格的每一行时，根据当前行是否处于
编辑状态来决定展示
编辑状态还是展示状态。如果处于
编辑状态，则渲染可
编辑的单元格，否则渲染非可
编辑的单元格。
6. 在表格中
添加编辑和保存按钮，点击
编辑按钮时进入
编辑状态，点击保存按钮时保存修改。同时，保存和取消操作会将当前行的
编辑状态取消。
这样，我们就完成了一个简单的可
编辑表格。
可以增删改查
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1302
