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

需求分析

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

功能思维

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

弹出框部分设计

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

               此处省略新增逻辑接口