antd源码分析之——对话框(modal)
目录
一、组件结构
1、antd代码结构
2、rc-ant代码结构
3、组件结构
二、antd组件调用关系及功能详解
1、Model.tsx
2、confirm
三、rc-dialog详解
1、e.target 与 e.currentTarget
2、onMouseDown、onMouseUp 和 onClick
3、理解dialog中的鼠标事件
4、思维导图
一、组件结构
1、ant代码结构
2、rc-ant代码结构
3、组件结构
ant中modal的index.tsx中引入了Modal和confirm
Modal包含的不同状态method(info、Sucesses等)都是通过调用confirm方法传递不同参数实现
Modal中引用rc-dialog,做弹窗的渲染
二、antd组件调用关系
1、Model.tsx
modal中的方法包括
- handleCancel:在点击取消按钮时触发,触发时调用this.props.onCancel()
- handleOk:在点击OK按钮时触发,触发时调用this.props.onOk()
- componentDidMount:生命周期,挂在完成时触发
- renderFooter:确认、取消按钮所在的弹框底部内容处理
- render:渲染方法,包括本地化等
- Modal.method():Modal允许使用method方法创建信息提示框,包含五种方法均引自confirm
2、confirm
confirm中的方法包括
- close:Modal.method()方法调用后返回的引用内容,可以用于关闭弹框,详见官方文档说明 https://ant.design/components/modal-cn/#Modal.method()
- update:与close类似,用于更新弹框
- destroy:React非16版本中处理关闭弹框的方法
- render:渲染信息窗体ConfirmDialog
- ConfirmDialog:组件,根据方法参数config渲染信息Dialog
上图中代码图片清晰大图如下:
三、rc-dialog详解
1、e.target 与 e.currentTarget
- currentTarget: event对象属性,返回当前处理该事件的元素、文档或窗口。
- target: event对象属性,返回触发该事件的元素、文档或窗口。
2、onMouseDown、onMouseUp 和 onClick
如果用户在一个元素上点击,那么最少三个事件会被触发,事件发生顺序:
- mousedown,当用户在这个元素上按下鼠标键的时候
- mouseup,当用户在这个元素上松开鼠标键的时候
- click,当一个mousedown和一个mouseup都在这个元素上被检测到的时候发生
- 由第3点引申:鼠标在mousedown和mouseup之间移动拖拽的,根据时间冒泡,mouseup、mousedown所在的公同父元素会触发click事件
3、理解dialog中的鼠标事件
3.1 mousedown在dialog外click的执行顺序
- 触发onMaskMouseUp:if条件不满足,什么操作都不执行
- 触发onMaskClick:!this.dialogMouseDown一定成立,e.target 与 e.currentTarget值也相同
- 结果:关闭弹窗
- 注:mousedown在dialog外,mouseup在dialog内时,click中 e.target === e.currentTarget 依然成立,都是Mask。结果不变,关闭窗口
3.2 mousedown在dialog内click的执行顺序
- 触发onDialogMouseDown:this.dialogMouseDown赋值为true
- 触发onMaskMouseUp:if条件成立,timeout事件加入任务队列
- 触发onMaskClick:this.dialogMouseDown 为true,if条件不成立
- 结果:不关闭弹窗
- timeout事件执行:this.dialogMouseDown还原为false
- 注:mousedown在dialog内,mouseup在dialog外时,click中 e.target === e.currentTarget 依然成立,都是Mask。this.dialogMouseDown 也依然为true。结果不变,不关闭窗口
4、思维导图
antd源码分析之——对话框(modal)的更多相关文章
- antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- antd源码分析之——栅格(Grid)
官方文档 https://ant.design/components/grid-cn/ 目录 一.antd中的Grid 代码目录 1.整体思路 2.less文件结构图(♦♦♦重要) 3.less实现逻 ...
- antd源码分析之——折叠面板(collapse)
官方文档 https://ant.design/components/collapse-cn/ 目录 一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/ ...
- antd源码分析之——标签页(tabs 3.Tabs的滚动效果)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第三部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- antd源码分析之——标签页(tabs 1.组件结构)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第一部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- Delphi 对话框实现源码分析
Delphi 对话框实现源码分析 简介 在这篇文章中,我将大概的从Delphi XE2 的Dialogs单元入手,分析ShowMessage,MessageBox等对话框运行原理,希望能帮助你理解 ...
- ANTD mobile源码分析 -- popover
最近的开发中要用到很多的各式各样的组件.但是发现ant design mobile(后面简称ANTDM)里很多的资源.于是就分析一下,学习学习. ANTDM直接使用了typescript,没有用ES2 ...
- 《深入理解Spark:核心思想与源码分析》(前言及第1章)
自己牺牲了7个月的周末和下班空闲时间,通过研究Spark源码和原理,总结整理的<深入理解Spark:核心思想与源码分析>一书现在已经正式出版上市,目前亚马逊.京东.当当.天猫等网站均有销售 ...
- Android源码分析-全面理解Context
前言 Context在android中的作用不言而喻,当我们访问当前应用的资源,启动一个新的activity的时候都需要提供Context,而这个Context到底是什么呢,这个问题好像很好回答又好像 ...
随机推荐
- spark2.0的10个特性介绍
1. Spark 2.0 ! 还记得我们的第七篇 Spark 博文里吗?里面我用三点来总结 spark dataframe 的好处: 当时是主要介绍 spark 里的 dataframe,今天是想总结 ...
- activity与service之间的通信方式
Activity之间的通信 1.activity与activity的通信可以通过Intent来封装数据,startActivityForResult()来实现,当跳转的activity调用finish ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- C# Winfrom 自定义控件添加图标
Winfrom自定义控件添加自定义图标实现方式: 1.新建UserControl——略 2.寻找合适的图标文件——将文件和控件放置同一目录下(相同目录.自定义控件类名.图标文件名相同) 注:如果路径不 ...
- 09_Redis_消息订阅与发布
一:Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 c ...
- shell脚本编程进阶及RAID和LVM应用1
bash脚本编程 脚本文件格式: 第一行,顶格写: #!/bin/bash 注释行:#开头 代码注释:写清楚注释 规范写脚本:适度缩进,添加空白行 编程语言:有编程语法格式,库,算法和数据结构 编程思 ...
- CentOS7 - Package does not match intended download 问题解决
yum 安装软件,有时会出现 Error: Package does not match intended download,这时需要彻底清除已有的下载,然后重新安装即可. $ sudo yum cl ...
- VS---《在VS2010中 使用C++创建和使用DLL》(002)
VS---<在VS2010中 使用C++创建和使用DLL>(002) 前面初认识了创建和调用DLL,在VS工程下可以通过在 同一工程.不同工程 下创建和调用DLL.现在,同一工程下创建和调 ...
- Matlab---绘制柱状图
Matlab---绘制柱状图 目录: hist()函数 histc( )函数 bar()函数 正文: 注意区分:频率.频数分布直方图. 一. hist()函数 hist():实 ...
- 遍历二叉树 - 基于递归的DFS(前序,中序,后序)
上节中已经学会了如何构建一个二叉搜索数,这次来学习下树的打印-基于递归的DFS,那什么是DFS呢? 有个概念就行,而它又分为前序.中序.后序三种遍历方式,这个也是在面试中经常会被问到的,下面来具体学习 ...