antd-React Popover 点击空白不隐藏

最新推荐文章于 2024-07-30 17:58:40 发布

打小就霸

最新推荐文章于 2024-07-30 17:58:40 发布

阅读量2k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_46183499/article/details/131599382

版权

文章讲述了在编程中遇到点击事件覆盖默认事件，导致按钮点击不生效的问题。作者提出了一个解决方案，即通过添加焦点事件并在失去焦点时改变状态来解决。示例代码展示了使用useStateHook和Blur事件处理函数来控制Popover组件的可见性。

摘要由CSDN通过智能技术生成

1.问题原因：自己写的点击事件把默认事件覆盖掉了，所以点击会不生效

2.解决方案：给按钮在添加一个焦点事件即可，当失去焦点的时候取反
3.代码如下

  const [closeVisible, setCloseVisible] = useState(false);

              <Popover content={content} placement="bottom" trigger="click" visible={closeVisible}>
                <Button
                  type={"primary"}
                  onBlur={()=>setCloseVisible(!closeVisible)}
                  onClick={()=>setCloseVisible(!closeVisible)}
                  >新建
                </Button>
              </Popover>