react-hotkeys-hook 失效

最新推荐文章于 2024-04-26 09:47:52 发布

weitao_11

最新推荐文章于 2024-04-26 09:47:52 发布

阅读量763

点赞数 1

分类专栏： react hotkey 文章标签： react.js

本文链接：https://blog.csdn.net/weitao_11/article/details/120323131

版权

13 篇文章 1 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

需求：

进程：

找到了react 对应的插件， react-hotkeys-hook
```
yarn add react-hotkeys-hook
```
根据文档内容加上对应的快捷键
```
useHotkeys('ctrl+k', () => save());
```
save 失败，因为useHotkeys 使用的是 useCallback， useCallback 里是一个闭包函数，内置参数并不会随着界面的变化而变化，导致传入save 的数据异常

传入deps 参数

useHotkeys('ctrl+k', () => save(), {}, [proFormRef]);

仍然失败，传入的proFormRef ，是通过 useRef 得来的，虽然他是个全局变量，但是deps 只有在有变化的时候才会重新更新，所以要传 proFormRef.current
虽然传入的参数已经有值了，但是传入的参数依旧失败，因为一旦 current 由null 变成了固定的值，那他就是一个对象，而对象内部内容的修改不归他管，但是ref 并不会每次刷新的局部的时候都更新，可以使用 useState 来更新内部信息，然后传入 formData
大多数情况下都能成功，但还有一种情况，如果是在当前界面，有好几个子组件，做的save会失败，还是之前上面usecallback 的问题，子组件内部的数据变化并不能在当前界面体现，除非在子组件更新内容的时候同步回调给父组件，但这样的话就比较麻烦，需要维护多个地方的变量
最简单的方法，在界面上做一个button，当点击button 的时候，会做一个正常的save，这时候因为并不是在useCallback 里所以不会有上述的问题，然后在快捷键中调用当前这个按钮的点击事件，因为点击事件并不会有任何的变化，他在初始化的时候就已经定义好了，不会影响到后续事件的运行
```
 useHotkeys("alt+k", () => {
    nextButton.current.click();
  },{enableOnTags: ["INPUT", "TEXTAREA"]}, [nextButton.current]);
```

总结：

关注

专栏目录