useRef React Hook 和事件侦听器的问题并更改 img src [英] Problem with useRef React Hook and event listener and change img src
本文介绍了useRef React Hook 和事件侦听器的问题并更改 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屋!
查看全文