前言
我是歌谣 我有个兄弟 巅峰的时候排名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>
