Antd - 是不是可以阻止空格键关闭弹出菜单？

Posted 2023-02-18

【中文标题】Antd - 是不是可以阻止空格键关闭弹出菜单？

【英文标题】：Antd - Is it possible to stop the spacebar from closing a popover menu?Antd - 是否可以阻止空格键关闭弹出菜单？

【发布时间】：2022-01-15 14:51:25

【问题描述】：

我正在使用带有文本输入组件的popover component。每当用户点击空格键时，弹出框就会关闭。

我真正需要的是在用户按下空格键时阻止 Antd 调用 onVisibleChange。我试过在输入上使用event.stopPropogation() 和event.preventDefault，但没有运气。我在弹出框内有一堆下拉菜单、选择等，因此创建我自己的弹出框似乎很难处理 handleOutsideClick 功能。

我的 Popover 看起来像：

  <Popover
        content=content
        title=null
        trigger="click"
        getPopupContainer=(triggerNode) => triggerNode
        onVisibleChange=onChange
        visible=showMenu
   >

TLDR：我只想在按下空格键时阻止弹出框关闭。但是，如果您在其外部单击，我也希望将其保持关闭状态。

【问题讨论】：

能否请您在codesandbox中分享您的代码，以便我可以帮助您？

如果popover里面的内容很多，用Modal组件ant.design/components/modal不是更好吗？我认为它具有您正在查看的行为，即默认情况下在外部单击时关闭模式。

@HDM91 这里是复制链接codesandbox.io/s/antd-reproduction-template-forked-w1jke?file=/…

@RajindRuparathna 对于我们的 UI，我们确实需要弹出窗口以通过打开它的按钮出现。弹出框/工具提示在各方面都很完美，除了能够按空格键。

【参考方案1】：

我相信空格键会关闭弹出框的原因是因为默认情况下按钮是聚焦的。您可以使用 ref 并删除焦点 inputRef.current?.blur();，如下所示。

https://codesandbox.io/s/antd-reproduction-template-forked-g0xld

import React,  useState, useRef  from "react";
import  Button, Popover, Input  from "antd";

const HistogramInsight = (props) => 
  const [isVisible, setIsVisible] = useState(false);
  const inputRef = useRef(null)

  const handleVisibleChange = (isVisible) => 
    setIsVisible(isVisible);
    if (isVisible) 
      inputRef.current?.blur();
    
  ;
  return (
    <div style= width: 300 >
      <h2>I want to have an input in a popover/tooltip.</h2>
      <h4>Hitting the spacebar with the popover open will close it.</h4>
      <Popover
        content=
          <Input style= width: 200  placeholder="Type Hello World" />
        
        title=null
        trigger="click"
        visible=isVisible
        onVisibleChange=handleVisibleChange
        getPopupContainer=(triggerNode) => triggerNode
      >
        <Button ref=inputRef>Open Popover</Button>
      </Popover>
    </div>
  );
;

export default HistogramInsight;

【参考方案2】：

我认为您必须有一个 ref 来指示是否使用 useRef 按下了空格键，并且在可见更改处理程序中使用它来决定不隐藏弹出框，这不是我喜欢的方式，但它现在可能对您有用。如果我找到另一种更好的方法，我会在这里告诉你

const HistogramInsight = (props) => 
  const [isVisible, setIsVisible] = useState(false);
  const spacePressedRef = useRef(false);

  const handleVisibleChange = (isVisible) => 
    if (spacePressedRef.current) 
      setIsVisible(true);
      spacePressedRef.current = false;
     else 
      setIsVisible(isVisible);
    
  ;

  const handleKeyUp = (event) => 
    if (event.which === 32) 
      spacePressedRef.current = true;
      console.log("Space pressed.");
    
  ;

  return (
    <div style= width: 300 >
      <h2>I want to have an input in a popover/tooltip.</h2>
      <h4>Hitting the spacebar with the popover open will close it.</h4>
      <Popover
        content=
          <Input
            onKeyUp=handleKeyUp
            style= width: 200 
            placeholder="Type Hello World"
          />
        
        title=null
        trigger="click"
        visible=isVisible
        onVisibleChange=handleVisibleChange
        getPopupContainer=(triggerNode) => triggerNode
      >
        <Button>Open Popover</Button>
      </Popover>
    </div>
  );
;

export default HistogramInsight;

Fixed Codesandbox