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，我们确实需要弹出窗口以通过打开它的按钮出现。弹出框/工具提示在各方面都很完美，除了能够按空格键。

标签： javascript html reactjs antd popover

【解决方案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

【讨论】：