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

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


image.png

image.png

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


image.png

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


image.png

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容