如何以及在何处为 ReactJS 中的“保存员工”按钮添加 onKeyDown 事件监听器？

Question

CodeSandbox 存储库

我想监听

keyDown

事件，特别是S键，以便用户可以轻松方便地保存随机生成的员工，而不是多次单击

Save Employee

按钮。

在 JavaScript 中，我会在文档主体上添加事件，如

document.body.addEventListener('keydown')

，但在 React 中我不知道在哪里放置事件。现在，我将其添加到

index.js

文件中，如下所示：

onKeyDown={handleKeyDown}

我注释掉了失败的尝试（检查下面的图像、代码存储库或片段）。

function SaveEmployee({ ...props }) {
  const [employees, setEmployees] = useState([]);

  const displayEmployee = () => {
    setEmployees((current) => [...current, { ...props }]);
  };


  // const displayEmployee = (event) => {
  //   if (event.key === "KeyS") { setEmployees((current) => [...current, { ...props }]);
  //   } else  { console.log('do nothing');    }
  // };

return (
    <>
      <div>
        <button title="Save new random employee data" onClick={displayEmployee}>
          Save Employee
        </button>
      </div>
      ...

1. keyCode 属性已被弃用，所以我尝试了 event.key 但还没有成功。
2. 我还尝试创建一个单独的组件

   KeyDownEvents.js

   ，看看将代码从

   SaveEmployee.js

   中分离出来是否可以解决问题，并看看它是否像

   document.body.addEventListener

   一样工作，因为

   Index.js

   是容纳所有子组件的主要组件，但没有运气。

Answer 1

onClick

用于处理鼠标事件。您想要使用

onKeyPress

（或

onKeyUp

或

onKeyDown

。阅读 Q/A：onKeyPress 与 onKeyUp 和 onKeyDown）。

event.key

的

"S"

不是

"KeyS"

，它只是

"s"

（或者

"S"

，如果你想要它是

shift

+

s

）

export default function SaveEmployee(props) {
  const [employees, setEmployees] = useState([]);

  const displayEmployee = () => {
    console.log('mouse click');
    setEmployees((current) => [...current, { ...props }]);
  };

  const displayEmployeeKeyPress = (event) => {
    if (event.key === "s") {
      console.log("key click");
      setEmployees((current) => [...current, { ...props }]);
    } else {
      console.log("do nothing");
    }
  };

  return (
    <>
      <div>
        <button
          title="Save new random employee data"
          onClick={displayEmployee}
          onKeyPress={displayEmployeeKeyPress}
        >
          Save Employee
        </button>
      </div>
    </>
  );
}

在 CodeSandbox 上查看