Javascript React callbackRef.current不是一个函数

我正在开发一个React应用程序，它使用npm库（React dropzone），不幸的是，它没有内置的可访问性

我试图做的是创建一个按键事件，当按下“回车”键时，无需手动点击按钮即可识别

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function useKey(key, cb) {
  const callbackRef = useRef(cb);

  useEffect(() => {
    callbackRef.current = cb;
  });

  useEffect(() => {
    function handle(event) {
      if (event.code === key) {
        callbackRef.current(event);
      }
    }
    document.addEventListener("keypress", handle);
    return () => document.removeEventListener("keypress", handle);
  }, [key]);
}

function App() {
  function handleEnter() {
    console.log("Enter key is pressed");
  }

  useKey("Enter", handleEnter());

  return (
    <div className="App">
      <button onClick={() => handleEnter()}> Press Enter </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

我在这里尝试了非反应接受的解决方案，但无法使其工作。因为我不熟悉使用React钩子的按键事件，所以我不确定接下来该怎么做。实现此功能的最佳方法是什么？

您需要传递回调，而不是在传递到

useKey

后调用函数，如下所示：

useKey("Enter", handleEnter);

查看从

handleEnter（）

更改为

handleEnter

时的差异

---

在您的例子中，您将执行函数的返回值作为参数传递，在第二种情况下，我上面建议的是一个回调。

谢谢您的输入。我试过了，但似乎在那之前就出现了错误。我已经更新了我的问题，以更详细地显示错误。

useKey("Enter", handleEnter);