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 {
 此处省略新增逻辑接口
 }
 });
 }, []);

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

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

<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>

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