问题描述
我正在开发一个使用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>