如何在 reactJS 中控制当前图像的日志索引

Question

我有以下代码。


    function SolutionsSectionBoxItem({
     heading, //this information  I am getting from backend in parent component and passing here
     image,  //this information  I am getting from backend in parent component and passing here
     description,  //this information  I am getting from backend in parent component and passing here
     solutionLink,  //this information  I am getting from backend in parent component and passing here
    
    }) {
      const [bgImgIndex, setBgImgIndex] = useState(0);

      function handleEvent() {
       // ?????
      }
     return (
        <div
          className={styles["solutions-section-item-box"]}
          onMouseOver={handleEvent()}
        >
          <Link to={solutionLink}>
            <div className={styles["solutions-section-item-title"]}>{heading}</div>
            <img
              src={image}
              alt={description}
             className={styles["solutions-section-item-img"]}
            />
          </Link>
        </div>
      );
    }
    export default SolutionsSectionBoxItem;

现在我的问题是，当悬停其中一张图像时，我应该如何获取当前图像索引并设置在我的状态和警报或控制台日志中。我尝试类似的东西：

      function handleEvent() {
      console.log(setBgImgIndex(bgImgIndex.indexOf(image)));
       }

但它不起作用，请帮我解决这个问题，抱歉我不能在 codesandbox 或其他代码编辑器中给出这段代码的示例。

Answer 1

您可以尝试在您的函数中传递节点元素目标，但正如 Drew Reese 所说，当您编写 onMouseOver={handleEvent()} 时，它会在安装组件时直接调用您的函数。

这是获取一些信息的方法：

      function handleEvent(e) {
        console.log(e.taget.WHATYOUWANT)
      }
     return (
        <div
          className={styles["solutions-section-item-box"]}
          onMouseOver={(e) => handleEvent(e)}
        >
          <Link to={solutionLink}>
            <div className={styles["solutions-section-item-title"]}>{heading}</div>
            <img
              src={image}
              alt={description}
             className={styles["solutions-section-item-img"]}
            />
          </Link>
        </div>
      );

我假设您的组件是父级调用的地图函数的 return，您只想在鼠标悬停时添加样式，这样您就可以这样做：

      const [isOnMouseOver, setIsOnMouseOver] = useState(false);

     return (
        <div
          className={styles["solutions-section-item-box"] isOnMouseOver && styles['Your class']}
          onMouseOver={() => setIsOnMouseOver(true)}
          onMouseOut={() => setIsOnMouseOver(false)}
        >
          <Link to={solutionLink}>
            <div className={styles["solutions-section-item-title"]}>{heading}</div>
            <img
              src={image}
              alt={description}
             className={styles["solutions-section-item-img"]}
            />
          </Link>
        </div>
      );

如何在 reactJS 中控制当前图像的日志索引

How to console log Index of current image in reactJS

events

indexof

reactjs

react-hooks

use-state