useEventListener

要素のイベントバインディングをプログラムで管理します。

インポート#


import { useEventListener } from 'primereact/hooks';

ドキュメント#

デフォルトでは、イベントはドキュメント自体にアタッチされます。


const [bindKeyDown, unbindKeyDown] = useEventListener({
    type: 'keydown',
    listener: (e) => {
        onKeyDown(e);
    }
});

const [bindKeyUp, unbindKeyUp] = useEventListener({
    type: 'keyup',
    listener: (e) => {
        setPressed(false);
    }
});

要素#

イベントをバインドおよびアンバインドする要素は、targetオプションで定義されます。

ここにホバー


const [hover, setHover] = useState(false);
const elementRef = useRef(null);

const [bindMouseEnterListener, unbindMouseEnterListener] = useEventListener({
    target: elementRef,
    type: 'mouseenter',
    listener: () => {
        setHover(true);
    }
});

const [bindMouseLeaveListener, unbindMouseLeaveListener] = useEventListener({
    target: elementRef,
    type: 'mouseleave',
    listener: () => {
        setHover(false);
    }
});