ant desgn 可编辑单元格（React）

import * as React from 'react';
import { useContext, useEffect, useRef, useState } from "react";
import "antd/dist/antd.css";
import "@/pages/index.less";
import {
    Form,
    Input,
    Table,
    Tooltip
} from "antd";

interface commponetsProps {
    setDataSource: any;
    dataSource: any;
}
const defaultProps: commponetsProps = {setDataSource: any, dataSource: any};

const BacklogEditableTable: React.FC<commponetsProps> = (props: React.PropsWithChildren<commponetsProps> = defaultProps) => {
    const { dataSource, setDataSource } = props;
    const EditableContext = React.createContext(null);
    const EditableRow = ({ index, ...props }) => {
        const [form] = Form.useForm();
        return (
            <Form form={form} component={false}>
                <EditableContext.Provider value={form}>
                    <tr {...props} />
                </EditableContext.Provider>
            </Form>
        );
    };

    const EditableCell = ({
        title,
        editable,
        children,
        dataIndex,
        record,
        handleSave,
        ...restProps
    }) => {
        const [editing, setEditing] = useState(false);
        const inputRef = useRef(null);
        const form = useContext(EditableContext);
        useEffect(() => {
            if (editing) {
                inputRef.current.focus();
            }
        }, [editing]);

        const toggleEdit = () => {
            setEditing(!editing);
            form.setFieldsValue({
                [dataIndex]: record[dataIndex]
            });
        };

        const save = async () => {
            try {
                const values = await form.validateFields();
                toggleEdit();
                handleSave({ ...record, ...values });
            } catch (errInfo) {
                console.log("Save failed:", errInfo);
            }
        };

        const { TextArea } = Input;

        let childNode = children;
        if (editable) {
            childNode = editing ? (
                <Form.Item
                    style={{
                        margin: 0
                    }}
                    name={dataIndex}
                    rules={[
                        {
                            required: true,
                            message: `${title} is required.`
                        }
                    ]}
                >
                    {/* <Input ref={inputRef} onPressEnter={save} onBlur={save} /> */}
                    <TextArea ref={inputRef} rows={4} onPressEnter={save} onBlur={save} />
                </Form.Item>
            ) : (
                <div
                    className="editable-cell-value-wrap"
                    style={{
                        paddingRight: 24
                    }}
                    onClick={toggleEdit}
                >
                    {children}
                </div>
            );
        }

        return <td {...restProps}>{childNode}</td>;
    };

    const defaultColumns = [
        {
            title: "name",
            dataIndex: "name",
            width: "30%",
            editable: true,
            render: (text) => <Tooltip title={text}>{
                text.length > 50 ? (text.substring(0, 50) + `...`) : text.substring(0, 50)
            }</Tooltip>
        },
        {
            title: "age",
            dataIndex: "age"
        },
        {
            title: "address",
            dataIndex: "address"
        }
    ];


    const handleSave = (row) => {
        const newData = [...dataSource];
        const index = newData.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setDataSource(newData);
    };

    const components = {
        body: {
            row: EditableRow,
            cell: EditableCell
        }
    };
    const columns = defaultColumns.map((col) => {
        if (!col.editable) {
            return col;
        }

        return {
            ...col,
            onCell: (record) => ({
                record,
                editable: col.editable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave
            })
        };
    });

    return (
        <div>
            <Table
                components={components}
                rowClassName={() => "editable-row"}
                bordered
                dataSource={dataSource}
                columns={columns}
            />
        </div>
    );
};

export default BacklogEditableTable;