[使用useref钩子将鼠标悬停在具有React的卡上

Posted 2021-04-03

我使用了useRef挂钩，因此当我将鼠标悬停在特定的卡上时，另一张卡的不透明度变为0.4，我想出了一个解决方案，但我认为这可能不是最佳解决方案，而且它也很长。随时向我推荐有关此问题的最佳解决方案。这是我的代码，我用bootstrap来创建卡。

import React, { useRef } from 'react'

export default function Cardss() {

    const cardOne = useRef();
    const cardTwo = useRef();
    const cardThree = useRef();

    const mouseOverOpacityForCardOne = (e) => {
        cardTwo.current.style.opacity = "0.4";
        cardThree.current.style.opacity = "0.4";
    }

    const mouseOutOpacityForCardOne = (e) => {
        cardTwo.current.style.opacity = "1";
        cardThree.current.style.opacity = "1";
    }

    const mouseOverOpacityForCardTwo = (e) => {
        cardOne.current.style.opacity = "0.4";
        cardThree.current.style.opacity = "0.4";
    }

    const mouseOutOpacityForCardTwo = (e) => {
        cardOne.current.style.opacity = "1";
        cardThree.current.style.opacity = "1";
    }

    const mouseOverOpacityForCardThree = (e) => {
        cardOne.current.style.opacity = "0.4";
        cardTwo.current.style.opacity = "0.4";
    }

    const mouseOutOpacityForCardThree = (e) => {
        cardOne.current.style.opacity = "1";
        cardTwo.current.style.opacity = "1";
    }

    return (
        <section className="container-fluid section-three">
            <h2 className="display-3">Projects</h2>
            <div className="row">

                <div ref={cardOne} onMouseOver={mouseOverOpacityForCardOne} onMouseOut={mouseOutOpacityForCardOne} className={"col-md-4 col-12 mb-5"}>
                    <div className="card cards">
                        <img className="card-img-top" src="..." alt="Card image cap"/>
                        <div className="card-body">
                            <h5 className="card-title">Special title treatment</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                    </div>
                </div>

                <div ref={cardTwo} className={"col-md-4 col-12 mb-5"} onMouseOver={mouseOverOpacityForCardTwo} onMouseOut={mouseOutOpacityForCardTwo}>
                    <div className="card cards">
                        <img className="card-img-top" src="..." alt="Card image cap"/>
                        <div className="card-body">
                            <h5 className="card-title">Special title treatment</h5>
                            <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                    </div>
                </div>

                <div ref={cardThree} onMouseOver={mouseOverOpacityForCardThree} onMouseOut={mouseOutOpacityForCardThree} className={"col-md-4 col-12 mb-5"}>
                    <div className="card cards">
                    <img className="card-img-top" src="..." alt="Card image cap"/>
                        <div className="card-body">
                            <h5 className="card-title">Special title treatment</h5>
                            <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}

答案

您可以使用状态变量以及onMouseOver和onMouseLeave属性的组合来完成。

[基本上，当鼠标悬停在卡片上时，您将其索引存储在状态变量中，然后使卡片的类为动态类，以便任何不等于状态变量的索引都获得一个将opacity: 0.4应用于那张卡片。

[这里是Codepen example，对此进行了说明。我改用opacity: 0.2

另一答案

为了减少代码的冗长，我们首先将卡变成一个组件。

通过组件，您可以将UI分成独立的，可重复使用的部分，并单独考虑每个部分。

const Card = ({
  imageSrc = "https://source.unsplash.com/random/400x400",
  title = "Special title treatment",
  text = "With supporting text below as a natural lead-in to additional content.",
  ...props
}) => (
  <div {...props}>
    <div className="card cards">
      <img className="card-img-top" src={imageSrc} alt="Unsplash Random" />
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <p className="card-text">{text}</p>
      </div>
    </div>
  </div>
);

然后，要实现不透明度更改，您可以使用状态跟踪活动卡（鼠标悬停的卡并应用CSS类来设置卡的样式：

// Cards.js

function Cards() {
  const [active, setActive] = useState(-1);
  const getCardClassName = index => {
    if (active > -1 && index !== active) return "fadeOut";
    return "";
  };
  return (
    <section
      className="container-fluid section-three"
    >
      <h2 className="display-3">Projects</h2>
      <div className="row">
        {[0, 1, 2].map(i => (    // or [...Array(3).keys()].map
          <Card
            key={i}
            className={`col-md-4 col-12 mb-5 ${getCardClassName(i)}`}
            onMouseOver={() => {
              setActive(i);
            }}
            onMouseOut={() => {
              setActive(-1);
            }}
          />
        ))}
      </div>
    </section>
  );
}

// style.css
.fadeOut {
  opacity: 0.4;
}

这是一个有效的示例：