自定义Hook-useHover

臧小川

已于 2023-02-21 13:49:04 修改

阅读量296

点赞数 1

分类专栏： react 文章标签： javascript 前端 react.js

于 2023-02-21 11:50:22 首次发布

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/129139952

版权

react 专栏收录该内容

112 篇文章

订阅专栏

效果图

在这里插入图片描述

useHover

import { useState, useRef, useCallback } from 'react'

/**
 * 处理将鼠标悬停在包装的组件上的事件。
 * @param {callbackRef} DOM节点-Ref
 * @param {isHovering} 是否选中
 */
const useHover = () =>
{
    const [isHovering, setIsHovering] = useState(false);

    const handleMouseOver = useCallback(() => setIsHovering(true), []);
    const handleMouseOut = useCallback(() => setIsHovering(false), []);

    const nodeRef = useRef();

    const callbackRef = useCallback(
        node =>
        {
            if (nodeRef.current)
            {
                nodeRef.current.removeEventListener('mouseover', handleMouseOver);
                nodeRef.current.removeEventListener('mouseout', handleMouseOut);
            }

            nodeRef.current = node;

            if (nodeRef.current)
            {
                nodeRef.current.addEventListener('mouseover', handleMouseOver);
                nodeRef.current.addEventListener('mouseout', handleMouseOut);
            }
        },
        [handleMouseOver, handleMouseOut]
    );

    return [callbackRef, isHovering];
};
export default useHover

index

import useHover from './useHover '

const containerStyle = {
    width: '200px',
    height: '200px',
    margin: '200px auto'
}
const index = () =>
{
    const [hoverRef, isHovering] = useHover();

    return (
        <div style={isHovering ? { ...containerStyle, backgroundColor: 'pink' } : { ...containerStyle, backgroundColor: 'yellow' }} ref={hoverRef} >
            {isHovering ? 'Hovering' : 'Not hovering'}
        </div>
    )
};
export default index