javascript - 每次按键时 OnKeyDown 监听器调用 6 次

Question

我已将 onKeyDown 事件监听器添加到我的组件文档中。它可以工作，但每次按键事件都会调用 6-7 次。此时这是非常基本的，我所做的只是控制台记录事件，所以不确定到底哪里做错了。

这是我的组件:

import React, { useEffect } from "react";

const ActionButtons = ({ shuffleClick, keepClick }) => {
  const handleKeyDown = e => {
    console.log(e);
    console.log("this function was called")
  };

  componentDidMount(){

  }

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
  });

  return (
    <div className="flex-group-spaced-around small-margin-top">
      <div className="shuffler__button clickable" onClick={shuffleClick}>
        <p>Shuffle</p>
      </div>

      <div className="shuffler__button clickable" onClick={keepClick}>
        <p>Keep</p>
      </div>
    </div>
  );
};

export default ActionButtons;

Answer 1

您的 ActionButton 组件可能在文档中安装了多次。这意味着对于每个 ActionButton 实例，都会在文档上注册一个事件监听器。

重写您的事件处理程序以确保正在监听单个全局事件。