给antd密码框的切换按钮绑定事件

项目遇到这样的需求:
表单详情中的重要信息需要弹出框输入用户密码才可以查看,那编辑的时候自然也是需要同样的操作的,不然这功能就没有意义,但是编辑的时候如何给密码框的切换按钮加事件呢?


image.png

image.png

看了文档密码框只有两个可配属性,如下图:


image.png

我第一反应是做不到的,切换的事件并没有暴露出来,但是仔细看iconRender api参数visible,感觉有一丝希望;就把它作为切入点,只要在visible=true的时候执行弹出密码的操作即可:
首先想到的是给添加onClick事件,但是发现根本不会执行,查看源码


image.png

onClick应该是被劫持了,那只能另辟蹊径:自己写一个组件,包含验证密码的弹框和图标,默认展示的是图标,监听图标的onClick,密码验证成功再执行密码框的onVisibleChange(也就是我自己写的组件暴露一个onClick方法给密码框),代码如下:
image.png
image.png

其实关键点就是暴露一个onClick给密码框。

你可能感兴趣的:(给antd密码框的切换按钮绑定事件)