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 的文档。