1. 简介

上一章学习了使用AntdUI + React的组件hook 创建了一个表单组件，本章继续学习，初始化逐渐，表单修改数据

2. 代码案例

1. 根据add.tsx 创建 修改数据的表单组件

1. 复制add.tsx 在同目录 创建一个edit.tsx 用于做修改数据表单的组件

2. 显示详情数据到表单上

1. 修改open方法

修改open方法的原因是需要传递id,指定id进行查询详情或者修改

export interface UpdateFormProps {
    open(id: number): void;
}

1. 创建请求数据的接口方法

可以看到address 进行了特殊的处理，是因为 我们使用了antd的 ProFormCascader 组件，如果需要给ProFormCascader进行数据回显的话需要传一个数组数据

async function getStudent(id: number) {
    return new Promise<GeneralResponse<Student>>((resolve) => {
        request(`/test/students/${id}`, { method: 'GET' }).then(res => {
            resolve({
                data: {
                    id: res.data.id,
                    ...res.data.attributes,
                    address: res.data.address ? Object.values(res.data.address) : []
                }
            })
        })
    })
}

1. 保存数据

const [stuData, setStuData] = useState<Student | undefined>(undefined);

1. 修改 useImperativeHandle hook 进行打开弹窗的时候获取数据并保存数据

useImperativeHandle(ref, () => {
    return {
        open: async (id: number) => {
            const res = await StudentService.getStudent(id)
            setStuData(res.data)
            setModalOpen(true)
        },
        close: () => {
            setStuData(undefined)
            setModalOpen(false)
        },
    }
})

1. 表单创建时初始化数据

主要代码就是 initialValues={stuData}

<ModalForm title="添加学生" width="400px" open={modalOpen} onOpenChange={setModalOpen}
           modalProps={{ destroyOnClose: true }} onFinish={handleEdit} initialValues={stuData}>
</ModalForm>

1. 修改Index.tsx页 进行触发该方法

绑定ref的方式与之前的都一样，只需要通过方法传递数据到子组件就可以了

<Button type="primary" icon={<EditOutlined/>} key="edit" style={{marginRight: 30}} onClick={()=>editForm.current?.open(entity.id)}/>

1. 接下来就可以看到效果了

3.删除数据

删除数据过于简单，但是添加一个验证框是最保险的

1. 使用 antd ui 组件 Popconfirm

<Popconfirm title="delete" key="delete" onConfirm={()=>confirm(entity.id)}>
    <Button type="primary" key="delete" icon={<DeleteOutlined/>} danger/>
</Popconfirm>

const confirm = async (id: number) => {
    
    // TODO删除 ondelete(id)
    await onRefresh()
};

3. 总结

1. React 基于 antd Pro 的增删改查已经完成了
2. 这只是最基础的一个业务操作
3. 我觉得困难的是基于antd pro 的组件继续封装，继续编写，并且赋值回显，通过name 获取数据
4. 下一章继续学习