useRef React Hook 和事件侦听器的问题并更改 img src [英] Problem with useRef React Hook and event listener and change img src

问题描述

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

I'm trying to build a React Hook that will change image on mouseover event. I've got the code below that does not work. I was hoping I could add an event listener, then when the onmouseever event fires, change the image src attribute. Here is the code that does not work.

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;

推荐答案

有一个错字，事件的名称是 mouseover，而不是 onmouseover.

There is a typo, event's name is mouseover, not onmouseover.

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

There is no need for useEffect because there's no need to set event listener handler manually, this is already handled by React.

应该是:

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

这篇关于useRef React Hook 和事件侦听器的问题并更改 img src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！