Antd Pro 的列表页,新建、更新 Modal Form 复用同一个

发布时间: 2021-05-25 15:58:11 作者: 大象笔记

这次基本是边修改 Antd Pro 模板,边学习 reactjs 的情况下,摸索新建、更新复用 Modal Form 的使用的。

我觉得能实现 Form 新建、编辑功能,基本上 reactjs 就算是入门了。。。

上手时间成本

默认新建 Modal 用的 ModalForm 的局限性

ModalForm 是 ProForm 的一种,即 Pro Components 的组件之一,参考

https://procomponents.ant.design/components/form

ModalForm 只适合作为新建弹窗的场景使用,不适合作为编辑更新之用。 因为无法设置初始值,有个初始化的参数,但是只能在组件初始化时使用, 之后再赋值,就无效了。对不起,这个参数,你在 Pro Components 文档里根本查不到, 只能在 github issue 里找到。

使用 Ant Design 自己实现

可以参考 UpdateForm 的实现,自己实现一个 CreateForm, 然后判断是否是编辑状态:

用 Ant Design 的标准组件 Modal 和 Form 可以轻松实现。

import React from 'react';
import {Modal, Form, Input, Button} from 'antd';

const CreateForm: React.FC = (props) => {
    return (
        <Modal
            title={props.values.ID ? "编辑" : "新建"}
            width={640}
            visible={props.createFormVisible}
            bodyStyle={{ padding: '32px 40px 48px' }}
            footer={null}
            onCancel={() =>{
                props.onCancel();
            }}
            destroyOnClose
        >
            <Form
                layout="vertical"
                preserve={false}
                initialValues={props.values}
                onFinish={props.onFinish}
            >
                <Form.Item name="ID" hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item name="title" label="标题" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default CreateForm;

慎用 Pro Components

我不想用这个库的原因:

尽量使用 Ant Design 组件替代 Pro Components

多不了几行代码,能避免踩坑就行。

还是 ModalForm 初始化参数的例子。

所以对 Ant Design 组件不熟悉的化,不要使用 Pro Components 的组件,因为 Pro Components 基本都是对 Ant Design 组件的封装,通用参数也不说明。 还不如直接看 Ant Design 的文档。

我是一名山东烟台的开发者,联系作者