useKeyPressEvent
This hook fires keydown
and keyup
calllbacks, similar to how useKey
hook does, but it only triggers each callback once per press cycle. For example,
if you press and hold a key, it will fire keydown
callback only once.
这个钩子触发keydown
和keydup
回调,类似于 usekey
,但在一个周期内只会触发一次回调。
例如,如果你按住一个键,它将只触发一次keydown
回调。
Usage
import React, { useState } from React;
import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';
const Demo = () => {
const [count, setCount] = useState(0);
const increment = () => setCount(count => ++count);
const decrement = () => setCount(count => --count);
const reset = () => setCount(count => 0);
useKeyPressEvent(']', increment, increment);
useKeyPressEvent('[', decrement, decrement);
useKeyPressEvent('r', reset);
return (
<div>
<p>
Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
see the count incremented and decremented.</p>
<p>Count: {count}</p>
</div>
);
};
Reference
useKeyPressEvent('<key>', keydown);
useKeyPressEvent('<key>', keydown, keyup);
useKeyPressEvent('<key>', keydown, keyup, useKeyPress);