如何解决反应按钮OnHover更改数组内的图像
我有一个动态组件,该组件具有三个按钮,每个按钮上都有不同的图像。我需要更改悬停按钮上的图像。我使用了onMouSEOver
和onMouSEOut
。它似乎可以正常工作,但是只要我将鼠标悬停在按钮上,它就会崩溃并显示错误:
TypeError: btn.map is not a function
。
可能存在一些小的语法错误,但我无法弄清楚。
以下是同一代码的有效代码段:https://codesandbox.io/s/frosty-wood-fzop7
任何帮助纠正此问题的方法都非常感谢:)
解决方法
只需映射btn
数组,然后返回一个带有悬停元素的新数组,该元素将用于更改图像src:
const changeHover = (val,bool) => {
setBtn(btn.map((ele,id) => id === val ? { ...ele,hovered: bool} : ele));
};
,
您正在设置错误的状态,您需要这样做:
const changeHover = (val,bool) => {
console.log(val)
setBtn((prevstate) => prevstate.map((ele,id) =>
console.log("STATES",ele) || id === val
? { ...ele,hovered: bool }
: { ...ele }
));
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。