React+hook+ts+ant design封装一个具有编辑和新增功能的页面

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

需求分析

在前端项目中 最常见的就是做一个页面的新增和编辑 通常一个页面就能够搞定

功能思维

这边的话需要做出一个弹出框的一个模式

弹出框部分设计

<Modal
maskClosable={false}
visible={visible}
title={`${menu && menu.id ? '编辑' : '新增'}`}
onCancel={props.onClose}
onOk={onOk}
>
//此处省略页面内容

</Modal>

编辑和新增

const onOk = useCallback(() => {
form.validateFields().then(res => {
const values = res as AddOrEditMenuFormProps;
const info: Menu = {
...menu,
...values,
            };
if (info.id) {
此处省略编辑逻辑接口
            } else {
此处省略新增逻辑接口
            }
        });
    }, []);

由于用ant design Form组件所以回显的数据通过父组件获得`

form.validateFields().then(res => {}

const values = res as AddOrEditMenuFormProps;
const info: Menu = {
...menu,
...values,
            };

render部分

<Modal
maskClosable={false}
visible={visible}
title={`${menu && menu.id ? '编辑' : '新增'}`}
onCancel={props.onClose}
onOk={onOk}
>
<Form
name="menu"
form={form}
initialValues={menu || {}}
labelCol={{
sm: { span: 5 },
}}
wrapperCol={{
sm: { span: 16 },
}}
>
<Form.Item
label="工种名称"
name="name"
rules={[{ required: true, message: '请输入工种名称' }]}
>
<Input  placeholder="请输入工种名称"/>
</Form.Item>
<Form.Item
label="设备类型"
name="deviceTypeId"
rules={[
{
required: true,
message: "请输入设备类型",
},
]}>
<Select

</Select>
</Form.Item>
</Form>
</Modal>

总结

我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群