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

首先，如果你使用 React Hooks，你的 "componentDidMount()" 不应该在这里。对于您的问题，"useEffect" 正在转换 "componentDidMount()" 和 "componentDidUpdate()"。所以，可能是因为你没有完成你的功能，"componentDidUpdate()"继续那个。

试试这个：

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

Answer 2

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

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

OnKeyDown 侦听器为每次按下键调用 6 次

OnKeyDown listener called 6 times for every key down

javascript

event-handling

keyboard-events

dom-events

reactjs