useKeyPress

React 用户界面传感器钩子,用于检测用户何时按下键盘上的特殊键。

通过KeyboardJS key combos可以使用复杂的绑定,如检测何时同时按住多个建或要求他们按照指定的顺序按住它们。有关如何创建组合字符串的更多详细内容,请查阅其文档。

用法

  1. import { useKeyPress } from "react-use";
  2. const Demo = () => {
  3. const hasPressedQ = useKeyPress("q");
  4. const hasPressedW = useKeyPress("w");
  5. const hasPressedE = useKeyPress("e");
  6. const hasPressedR = useKeyPress("r");
  7. const hasPressedT = useKeyPress("t");
  8. const hasPressedY = useKeyPress("y");
  9. const hasPressedWord = useKeyPress("q + w + e + r + t + y", {
  10. useKeyboardJS: true
  11. });
  12. return (
  13. <div>
  14. Try pressing each one of these at a time: <code>Q W E R T Y</code>
  15. {!hasPressedWord && (
  16. <div>
  17. {hasPressedQ && "Q"}
  18. {hasPressedW && "W"}
  19. {hasPressedE && "E"}
  20. {hasPressedR && "R"}
  21. {hasPressedT && "T"}
  22. {hasPressedY && "Y"}
  23. </div>
  24. )}
  25. <div>And now press them all at once!</div>
  26. <div>{hasPressedWord && "Q + W + E + R + T + Y"}</div>
  27. </div>
  28. );
  29. };

参考

  1. const hasPressedSingleKey = useKeyPress("<key>");
  2. const hasPressedKeyCombo = useKeyPress("<key combo>", {
  3. useKeyboardJS: true
  4. });