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

Question

我注意到在 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 组件的对话框(必须可以通过转义键关闭)？

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

Answer 1

您可以使用 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 上用模态创建了一个工作示例.