好的，我了解了您的问题。下面是我给出的一些代码示例供您参考：
```tsx
import React, { useState, useEffect } from 'react';
import {
Table, Modal, Form, Input, Button } from '
antd';
import {
TableProps } from '
antd/lib/
table';
i
nterface EditItem {
index: number;
record: any;
}
const { confirm } = Modal;
const Edi
tableTable: React.FC<
TableProps<any>> = (props) => {
const { dataSource, columns, ...rest } = props;
const [edi
table, setEdi
table] = useState<boolean[]>(dataSource.map(() => false));
const [editItem, setEditItem] = useState<EditItem>();
const toggleEdi
table = (index: number) => {
setEdi
table((prevState) =>
prevState.map((state, i) => (i === index ? !state : state))
);
};
const handleEdit = (record: any, index: number) => {
setEditItem({ record, index });
toggleEdi
table(index);
};
const handleCancel = () => {
setEditItem(undefined);
setEdi
table((prevState) => prevState.map(() => false));
};
const handleDelete = (index: number) => {
confirm({
title: 'Do you w
ant to delete this item?',
onOk() {
dataSource.splice(index, 1);
},
});
};
const handleOk = () => {
const form = formRef.current;
form?.validateFields((err, values) => {
if (err) {
return;
}
const newData = [...dataSource];
const { index, record } = editItem!;
newData.splice(index, 1, { ...record, ...values });
dataSource.splice(index, 1, { ...record, ...values });
setEdi
table((prevState) => prevState.map(() => false));
setEditItem(undefined);
});
};
const addRecord = () => {
const form = formRef.current;
form?.validateFields((err, values) => {
if (err) {
return;
}
const newData = [...dataSource];
newData.push(values);
dataSource.push(values);
});
};
const formRef = React.createRef<FormInstance>();
const Edi
tableCell: React.FC<any> = (props) => {
const { dataIndex, title, record, index, children } = props;
const [editing, setEditing] = useState(false);
const inputRef = React.createRef<Input>();
useEffect(() => {
if (editing) {
inputRef.current?.focus();
inputRef.current?.select();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
setEdi
table((prevState) =>
prevState.map((state, i) => (i === index ? !state : state))
);
};
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'E
nter') {
toggleEdit();
handleOk();
}
};
return (
<td {...props}>
{editing ? (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
rules={[
{
required: true,
message: `Please Input ${title}!`,
},
]}
>
<Input ref={inputRef}
onPre
ssEnter={handleKeyPress}
onBlur={toggleEdit} />
</Form.Item>
) : (
<div style={{ cursor: 'poi
nter' }} onClick={toggleEdit}>
{children}
</div>
)}
</td>
);
};
const renderColumns = columns.map((col) => {
if (!col.edi
table) {
return col;
}
return {
...col,
onCell: (record: any, index: number) => ({
record,
index,
dataIndex: col.dataIndex,
title: col.title,
editing: edi
table[index],
}),
render: (text: any, record: any, index: number) => (
<Edi
tableCell>{text}</Edi
tableCell>
),
};
});
return (
<>
<
Table
{...rest}
dataSource={dataSource}
columns={renderColumns}
pagination={false}
rowKey={(record) => record.id}
title={() => (
<Button type="primary" onClick={addRecord}>
Add record
</Button>
)}
/>
<Modal
title="Edit record"
visible={!!editItem}
onOk={handleOk}
onCancel={handleCancel}
>
<Form ref={formRef} initialValues={editItem?.record}>
{columns.map((col) => (
<Form.Item
key={col.dataIndex}
name={col.dataIndex}
label={col.title}
rules={[
{
required: true,
message: `Please Input ${col.title}!`,
},
]}
>
<Input />
</Form.Item>
))}
</Form>
</Modal>
</>
);
};
export default Edi
tableTable;
```
这是
一个使用 TypeScript、React Hooks、
Ant Design 和可
编辑表格的示例，在表格上可以执行增、删、改和查的操作。希望这能够为您提供帮助。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
4537
