react-confirm-alert：按下Enter键无法触发Yes按钮，求问题排查

你的代码里有两个核心问题导致按下Enter无响应：

1. react-confirm-alert组件的按钮配置不支持onKeyPress属性，你写的这个配置项不会被组件识别处理。
2. 就算组件支持该属性，你调用handleButtonPress()时没有传递事件对象，函数内的event会是undefined，也无法触发判断逻辑。

可行解决方案 #

方案1：添加全局键盘监听（推荐） #

利用组件提供的afterOpen和onClose钩子，在弹窗打开时给document绑定键盘按下事件，监听Enter键触发确认逻辑，弹窗关闭时移除监听避免内存泄漏：

import { confirmAlert } from "react-confirm-alert";
import "react-confirm-alert/src/react-confirm-alert.css";

export default function App() {
  const handleYes = () => {
    alert("Click Yes");
  };

  const handleNo = () => {
    alert("Click No");
  };

  const handleClick = () => {
    // 定义键盘监听函数
    const handleKeyDown = (event) => {
      if (event.key === "Enter") {
        handleYes();
        close(); // 触发确认后手动关闭弹窗
      }
    };

    // confirmAlert会返回关闭弹窗的函数
    const close = confirmAlert({
      title: "Confirm to submit",
      message: "Are you sure to do this.",
      buttons: [
        {
          label: "Yes",
          onClick: handleYes
        },
        {
          label: "No",
          onClick: handleNo
        }
      ],
      // 弹窗打开后绑定监听
      afterOpen: () => {
        document.addEventListener("keydown", handleKeyDown);
      },
      // 弹窗关闭后移除监听
      onClose: () => {
        document.removeEventListener("keydown", handleKeyDown);
      }
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

方案2：让确认按钮自动获得焦点 #

如果希望按下Enter时直接触发按钮的点击事件，可以在弹窗打开后，让"Yes"按钮自动获得焦点，浏览器默认会给聚焦的按钮绑定Enter触发点击的逻辑：

import { confirmAlert } from "react-confirm-alert";
import "react-confirm-alert/src/react-confirm-alert.css";

export default function App() {
  const handleYes = () => {
    alert("Click Yes");
  };

  const handleNo = () => {
    alert("Click No");
  };

  const handleClick = () => {
    confirmAlert({
      title: "Confirm to submit",
      message: "Are you sure to do this.",
      buttons: [
        {
          label: "Yes",
          onClick: handleYes
        },
        {
          label: "No",
          onClick: handleNo
        }
      ],
      afterOpen: () => {
        // 找到第一个按钮（即Yes按钮）并设置焦点
        const yesBtn = document.querySelector(".react-confirm-alert-button-group button:first-child");
        yesBtn?.focus();
      }
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Jacky