时间戳

首页 > 解决方案 > 按下 Escape 键后的 event.stopPropagation() 从 react-select 的 v2 中移除

reactjs - 按下 Escape 键后的 event.stopPropagation() 从 react-select 的 v2 中移除

问题描述

我注意到在 react-select 组件的 Select.js 源文件中，这段代码

event.stopPropagation();

在处理 Escape 键后在 v1 中调用，在 v2 中已删除。

v1：https ://github.com/JedWatson/react-select/blob/v1.x/src/Select.js#L492

v2：https ://github.com/JedWatson/react-select/blob/master/src/Select.js#L1145

这是故意的吗？如果是这样，在 v2 中推荐的方法是什么来防止转义键关闭包含 react-select 组件的对话框（必须由 Escape 键关闭）？

我已经通过检查 react-select onKeyDown 道具回调中的事件弄清楚了如何做到这一点，但我只是想知道这是否被删除以支持开发人员可能想到的其他方法。

标签： reactjsreact-select

解决方案

您可以使用onKeyDown,onMenuClose和自行处理onMenuOpen：

const Component = () => {
  const [isMenuOpen, setMenuOpen] = useState(false);

  function handleMenuClose() {
    setMenuOpen(false);
  }

  function handleMenuOpen() {
    setMenuOpen(true);
  }

  function handleKeyDown(e: KeyboardEvent) {
    if (e.key === "Escape" && isMenuOpen) {
      e.stopPropagation();
    }
  }

  return (
    <Select
      onKeyDown={handleKeyDown}
      onMenuClose={handleMenuClose}
      onMenuOpen={handleMenuOpen}
      options={[
        { label: "A", value: "A" },
        { label: "B", value: "B" },
        { label: "C", value: "C" },
        { label: "D", value: "D" },
        { label: "E", value: "E" }
      ]}
    />
  );
}

我在CodeSandbox上使用 Modal 创建了一个工作示例。

推荐阅读