react-aria useButton Hook导致回车/空格触发onClick失效求助

核心问题是你没有把useButton返回的完整props传递给底层button元素，导致React Aria负责处理回车/空格触发点击的键盘交互逻辑没生效。

看你的ButtonWithReactAria组件代码：

const ButtonWithReactAria = ({ onClick, children }) => {
  const buttonRef = useRef(null);
  const { buttonProps, ariaProps } = useButton({ onClick }, buttonRef);
  
  return (
    <button
      ref={buttonRef}
      style={{ backgroundColor: "red", color: "white", padding: "10px" }}
      ariaProps={ariaProps}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

useButton返回的buttonProps里包含了onKeyDown等键盘事件处理函数——这正是实现回车/空格触发点击的关键逻辑。你只传了ariaProps，还手动绑定了自己的onClick，等于完全没用上React Aria的键盘交互能力。

正确的做法是把buttonProps展开传递给button元素，它已经包含了需要的ARIA属性和事件处理（包括你传入的onClick）：

const ButtonWithReactAria = ({ onClick, children }) => {
  const buttonRef = useRef(null);
  const { buttonProps } = useButton({ onClick }, buttonRef);
  
  return (
    <button
      ref={buttonRef}
      style={{ backgroundColor: "red", color: "white", padding: "10px" }}
      {...buttonProps}
    >
      {children}
    </button>
  );
};

这样修改后，Tab聚焦红色按钮，按回车或空格就能正常触发onClick了。

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