USEREF React Hook和事件听众的问题以及更改IMG SRC

Question

我正在尝试构建一个会在鼠标范围事件上更改图像的React Hook。我有下面的代码不起作用。我希望我可以添加一个事件侦听器，然后当Onmouseever启动启动时，更改image 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();