antd的Modal

1.如何自定义modal的确认和取消按钮

(1)隐藏底部确认和取消按钮

使用Modal中的footer属性，如下：

<Modal
title="哈哈"
visible={visible}
onCancel={this.handleCancel}
footer={
[] // 设置footer为空，去掉 取消 确定默认按钮
}
>
</Modal>

(2)自定义底部按钮

使用Modal中的footer属性，如下：footer可以是一个数组，数组里面放的是按钮，可以根据需求放一个或两个按钮。

<Modal
title="哈哈"
visible={visible}
onCancel={this.handleCancel}
footer={[
// 重点：定义右下角
<Button key="cancel" onClick={this.handleCancel}></Button>,
<Button key="submit" type="primary" onClick={this.handleOk}>
Submit
</Button>, ]}
>
</Modal>

2.在自定义modal的确认和取消按钮后遇到问题:点击Modal右上角×和遮罩层Modal弹框不消失

通过footer属性给modal自定义确认和取消按钮后，我就自然而然的把onCancle这个属性删除掉啦，导致即使closable、mask、maskClosable属性都为true的情况下，点击Modal右上角×和遮罩层Modal弹框不消失都不能消失

解决方法:不能省略onCancle属性，给其赋值一个回掉函数，将Modal的visible的属性值置为false

antd的Modal相关推荐

Antd 封装Modal
Antd 封装Modal // 子组件 // Modal的visible直接设为true const { title, onClose } = this.props; <Modaltitle={ ...
如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件但是antd组件的按钮时确认键放在右边的可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的 ...
Antd 多层Modal+Form组件嵌套如何在父级组件中清空子级组件状态与数据？
转载: https://segmentfault.com/q/1010000012330765/a-1020000012395950 官网还提供了一个办法,每次点开modal的时候给它设置一个新key ...
antd modal 拖动_Ant-design Modal实现可以拖动的效果
最近项目组在开发的时候提出了一个需求,需要让 ant-design Modal实现能够拖动的功能,研究了一番,基于 and-design Modal自己封装了一个antd-draggable-moda ...
React15.6.0实现Modal弹层组件
代码地址如下: http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象了解React. 使用过w ...
html modal显示页面,Modal中显示HTML字符串
最近在做的工具有个需求,因为有些变量的设置,真的很多人填错,想要给变量加个图文并茂的说明(好吧,我们的工具变量功能确实是有些复杂). 好了,需求说完,说做就做. 先加个Modal 这里还好说,我们的界 ...
Egg整合antd文件上传以及防踩坑指南
Egg整合antd文件上传以及防踩坑指南前言一. 项目编写二. 注意事项 2.1 清理缓存 2.2 antd的Upload组件得到的事件对象问题 2.3 关于onChange事件的注意前言最 ...
umi脚手架搭建的项目_15天零成本搭建静态博客，托管于Github Page
博客地址技术栈概览前台:Umi(路由) + Antd(视图) + TypeScript(增加项目可维护性以及规范性) 后台:Umi(路由) + Antd(视图) + TypeScript(增加项目 ...
蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...

antd的Modal

antd的Modal相关推荐

最新文章

热门文章