TAGS：                                                                                                    

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

首页 编程分享 JQUERY丨JS丨VUE 正文

前端歌谣 转载 编程分享 2023-05-11 02:20:08

简介 前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣需求分析在前端项目中 最常见的就是做一个页面的新增和编辑 通常一个页面就能够搞定功能思维这边的话需要做出一个弹出框的一个模式弹出框部分设计<Mod

前言

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

总结

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

转载链接：https://blog.51cto.com/u_14476028/6211978


Tags：

200 0 0 0


本篇评论 —— 揽流光，涤眉霜，清露烈酒一口话苍茫。


    声明：参照站内规则，不文明言论将会删除，谢谢合作。


      最新评论




ABOUT ME

Blogger：袅袅牧童 | Arkin

Ido：PHP攻城狮

WeChat：nnmutong

Email：nnmutong@icloud.com

点击排行

最新评论

猜您喜欢

标签云

友情链接