工作总结2-自定义弹框

工作总结2-自定义弹框

技术杂谈小彩虹2021-08-25 22:10:08170A+A-

自定义弹框

原因:使用Modal.info等封装好的弹框有问题或者说不能满足开发需求时,需要自定义弹框来解决。

解决:如果一个功能有两个弹框,可以用一个弹框显示不同内容来解决,动态的显示弹框标题、弹框要渲染的内容和弹框底部(确定/取消/关闭)。

表单用FormBuilder自带表单校验。

<FormBuilder
    layout="vertical"
    wrappedComponentRef={form}
>
  <Fields fields={fields} />
</FormBuilder>

1. 在父组件导入弹框组件

 <BatchModal
    visible={batchVisible}
    taskInstanceIds={selectedTaskIds}
    onClose={() => setBatchVisible(false)}
    detail={batchModalDetail}
    refetch={() => {
      dispatch({ type: 'refresh' });
      setSelectedRowKeys([]);
      setSelectedTaskIds([]);
    }}
  />

2. 弹框组件代码书写

2.1 表单内容

 // 组件内容书写
 // 返回内容
 return (
     <Modal
       title={getTitle()}
       visible={visible}
       width={560}
       footer={getFooter()}
     >
       {renderContent()}
     </Modal>
   );

2.2 点击确定提交

校验表单信息,如果不通过,直接返回,如果表单校验通过,拿到表单数据(操作;原因),提交给后端

 function handleSubmit() {
     const { validateFieldsAndScroll } = form.current;
     return new Promise((resolve, reject) => {
       validateFieldsAndScroll(async (error, values) => {
         if (!error) {
           onSubmit(values);
         } else {
           reject(error);
         }
       });
     });
   }

2.3 点击取消按钮,记得刷新列表

 function handleClose() {
     // 关掉弹框
     onClose();
     // 刷新数据
     refetch();
   }

2.4 获取表单数据

 async function onSubmit(values) {
     const result = await batchApprovalRejectList({...values, taskInstanceIds});
     // 假如存在处理失败记录,让弹框展示第二步的内容,否则关闭弹框
     if(result.failCount !== 0) {
       setValue(result);
       setStep(2);
     } else {
       handleClose();
     }
   }

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们