这次基本是边修改 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 的文档。