“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 22 天，点击查看活动详情”

1. 简介

昨天简单学习数据的展示，今天继续学习使用AntdPro的表单创建数据

2. 代码案例

1. 使用ModalForm 模态框来构建一个添加数据的表单。

1. 进行组件分离，使用React的forwardRef 与 useImperativeHandle 创建一个组件
2. onRefresh 接受一个刷新数组的方法
3. useImperativeHandle 暴露出操作模态框的方法
4. 使用 antd UI的 Row 来控制布局
5. ModalForm 绑定 onFinish方法 通过每个表单项的name 就可以获得对应name的数据

import React, {useImperativeHandle, useState} from "react";
import {
    ModalForm,
    ProFormCascader,
    ProFormDatePicker,
    ProFormSwitch,
    ProFormText,
    ProFormTextArea
} from "@ant-design/pro-components";
import {Student} from "@/services/types";
import {StudentService} from "@/services/api";
import {Col, Row} from "antd";

interface propsParams {
    onRefresh?: Function
}

export interface AddFormProps {
    open(): void;
}

export default React.forwardRef<AddFormProps, propsParams>(({onRefresh}: propsParams, ref) => {

    const [modalOpen, setModalOpen] = useState(false);

    async function handleAdd(values: Partial<Student>) {

        await StudentService.createStudent(values)
    }

    useImperativeHandle(ref, () => {
        return {
            open: () => setModalOpen(true),
            close: () => setModalOpen(false),
        }
    })

    return <>
        <ModalForm title="添加学生" width="400px" open={modalOpen} onOpenChange={setModalOpen}
                   onFinish={handleAdd}>
            <Row gutter={16}>
                <Col xs={24} sm={24} lg={24}>
                    <ProFormText rules={[{required: true}]} label="姓名" width="md" name="name"/>
                </Col>
                <Col xs={12} sm={12} lg={12}>
                    <ProFormSwitch label="性别" width="md" name="sex" checkedChildren="男"
                                   unCheckedChildren="女"
                    />
                </Col>
                <Col xs={12} sm={12} lg={12}>
                    <ProFormSwitch rules={[{required: true}]} label="是否启用" width="md" name="status"/>
                </Col>
                <Col xs={24} sm={24} lg={24}>
                    <ProFormText rules={[{required: true}]} label="电话号码" width="md" name="phone"/>
                </Col>
                <Col xs={24} sm={24} lg={24}>
                    <ProFormText rules={[{required: true}]} label="邮箱" width="md" name="email"/>
                </Col>
                <Col xs={24} sm={24} lg={24}>
                    <ProFormDatePicker name="birthday" label="生日" style={{width: '100%'}}/>
                </Col>
                <Col xs={24} sm={24} lg={24}>
                    <ProFormCascader
                        name="address"
                        label="地址"
                        fieldProps={{
                            options: [
                                {
                                    value: '浙江',
                                    label: '浙江',
                                    children: [
                                        {
                                            value: '杭州',
                                            label: '杭州',
                                            children: [
                                                {
                                                    value: '西湖',
                                                    label: '西湖',
                                                },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        }}
                    />
                </Col>
            </Row>

        </ModalForm>
    </>
})

2. 完善 handleAdd方法，格式化需要传递的数据

因为数据库需要的是一个json格式的数据，我们必须格式化一下

async function handleAdd(values: Partial<Student>) {
    const data = {
        ...values,
        sex: !!values.sex,
        address: values?.addr ? {
            province: values.addr[0],
            county: values?.addr[2],
            city: values?.addr[1]
        } : undefined
    }

    await StudentService.createStudent(data)
}

3. 完善请求api接口方法

就只需要简单的请求接口

async function createStudent(data: Partial<Student>) {
    return fetch('/test/students', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({data: {...data}}),
    });
}

4. 处理返回通知

在获得数据创建成功返回的结果之后，进行调用list使用组件时传递方法进行刷新组件

const res = await StudentService.createStudent(data)
if (res.ok) {
    await onRefresh()
    await setModalOpen(false)
}

const actionRef = useRef<ActionType>();
return <PageContainer>
    <ProTable<Student> rowKey="id" search={{labelWidth: 120}} request={StudentService.getAllStudent}
                       columns={columns} toolBarRender={newBtn} actionRef={actionRef}/>
    <AddForm ref={addForm} onRefresh={actionRef.current?.reload}/>
</PageContainer>

就可以做到创建完数据并且刷新列表页，再关闭弹窗

3. 总结

1. 本次学习到了，创建一个模态框组件，并且暴露组件的方法
2. 父子组件方法互相调用
3. 实现数据添加