useRef React Hook 和事件侦听器的问题以及更改 img src

Question

我正在尝试构建一个将在鼠标悬停事件上更改图像的 React Hook。我有下面的代码不起作用。我希望我可以添加一个事件监听器，然后当 onmouseever 事件触发时，更改图像 src 属性。这是不起作用的代码。

import React, { useState, useEffect, useRef } from "react";

const ImageToggler = ({ primaryImg, mouseOverImg }) => {
  const imageRef = useRef(null);

  function handleMouseOverHandler() {
    console.log("handleMouseOver");
    imageRef.current.src = mouseOverImg;
  }

  useEffect(() => {
    // THIS DOES NOT SEEM TO DO ANYTHING
    imageRef.current.addEventListener(
      "onmouseover",
      handleMouseOverHandler,
      true
    );
  }, []);

  return (
    <img
      ref={imageRef}
      src={primaryImg}
      onMouseOver={() => {
        console.log("mouse over....");
      }}
      alt="image here"
    />
  );
};

export default ImageToggler;

Answer 1

打错了，活动名称是mouseover，不是onmouseover。

不需要useEffect因为不需要手动设置事件侦听器处理程序，这已经由 React 处理了。

应该是：

   <img
      ref={imageRef}
      src={primaryImg}
      onMouseOver={handleMouseOverHandler}
    />

Answer 2

不要将 null 传递给函数。它将删除当前对象的原型。而是这样做

const imageRef = useRef();

useRef React Hook 和事件侦听器的问题以及更改 img src

Problem with useRef React Hook and event listener and change img src

reactjs

react-hooks