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

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

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

上手时间成本

• 看 reactjs tutorial 一个小时
• 尝试修改 TableList 的代码改成标准 Ant Design 组件，删除 Pro Components 组件，半天

默认新建 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

我不想用这个库的原因：

• 这个库 1.3K star，相对 Ant Design 用的人要少的多，主要维护人员也有限。
• 从 github issue 看，维护人员态度令人反感，有应付了事的感觉，像是 KPI 的产物
• 文档不细致。跟 Antd Pro 的文档一样，敷衍了事，根本不是给人看的
• 基于阿里以往令人不愉快的开源项目，例如 Weex 这种代码质量极差的项目，用的人少的项目，千万不要用
• Antd Pro 的代码质量也是一言难尽

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

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

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

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

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式