我如何使用 useState 在 React 中悬停答案

【问题标题】：How can i hover in React using useState我如何使用 useState 在 React 中悬停
【发布时间】：2021-11-07 16:25:54
【问题描述】：

我想在悬停在容器上时通过将不透明度从 0 更改为 1 来切换类，我使用了 onmouseEnter 和 onMouseLeave 事件来切换类，但是当我控制台悬停状态时，我看到它正在从当我悬停时从真到假，但“显示”类没有改变。你怎么看？

import React,{useState} from 'react';
import './MyWork.css';
import {Visibility, GitHub } from "@material-ui/icons";


const SingleProject = ({src, title}) => {
    const [hover, isHover] = useState(false);
    const showIcons = isHover ? "Show" : "";

    return (
        <div className="card-container" onMouseEnter={()=> isHover(true)} onMouseLeave={()=> isHover(false)}>
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
           <div className={`Info ${showIcons}`}>

                <div className="Icon">
                    <GitHub/>
                </div>

                <div className="Icon">
                    <Visibility/>
                </div>

            </div>
        </div>
    )
}


export default SingleProject;

.card-container {
    height: 314px;
    width: 500px;
    cursor: pointer;
    position : relative;
}
.Info {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.Info.Show {
    opacity: 1;
}

【问题讨论】：

标签： reactjs

【解决方案1】：

根据您的情况，您使用的是 setter 而不是状态本身。将isHover 更改为hover，如下所示：

const showIcons = hover ? "Show" : "";

【讨论】：

【解决方案2】：

将值分配给showIcons 时，您需要使用hover 而不是isHover，这是该状态的setter 函数。

此外，我建议将 setter 函数命名为 setHover 以避免混淆并更具语义。也可以像这样添加条件Show类，更简洁：

iconst SingleProject = ({src, title}) => {

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

    return (
        <div
           className="card-container"
           onMouseEnter={()=> setHover(true)}
           onMouseLeave={()=> setHover(false)}
        >
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
            <div className={`Info ${hover ? "Show" : ""}`}>
                <div className="Icon">
                    <GitHub/>
                </div>
                <div className="Icon">
                    <Visibility/>
                </div>
            </div>
        </div>
    )
}


export default SingleProject;

【讨论】：