反应callbackRef.current不是函数

如何解决反应callbackRef.current不是函数

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

我要做的是创建一个按键事件，该事件可以识别按下“ ENTER”键的时间，而无需手动单击按钮。

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);

在演示https://codesandbox.io/s/lingering-sound-yptbk中，我将handleEnter函数放在了onClick事件中。我可以按Enter键，但是会出现以下错误：

callbackRef.current is not a function
useEffect(() => {
  14 |   function handle(event) {
  15 |     if (event.code === key) {
> 16 |       callbackRef.current(event);
     |                  ^
  17 |     }
  18 |   }

我在SO dropzone.js Accessibility上尝试了非反应接受的解决方案，但无法使其正常工作。因为我不熟悉使用React Hooks的按键事件，所以我不确定从这里开始。实现此目的的最佳方法是什么？

解决方法

一旦传递给useKey，您需要传递一个回调，而不是调用该函数，

useKey("Enter",handleEnter);

查看从handleEnter()更改为handleEnter时的区别。

在您的情况下，您将已执行函数的返回值作为参数传递，在第二种情况下，我建议在上面使用回调。 / p>