OnHover按钮改变数组中的图像
OnHover按钮改变数组中的图像
提问于 2020-08-30 10:05:10
我有一个动态组件，它有三个按钮，每个按钮上都有不同的图像。我需要改变悬停按钮上的图像。我使用了onMouseOver & onMouseOut。它似乎可以工作，但我一按下按钮，它就会崩溃，并出现错误：
TypeError: btn.map is not a function.
可能有一些小的句法错误，但我无法弄清楚。
下面是相同的工作片段：https://codesandbox.io/s/frosty-wood-fzop7
如能提供任何帮助以纠正这种情况，我们将不胜感激:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-30 10:16:58
只需映射btn数组并返回带有悬浮元素的新数组，该元素将用于更改图像src：
const changeHover = (val, bool) => {
setBtn(btn.map((ele, id) => id === val ? { ...ele, hovered: bool} : ele));
};Stack Overflow用户
发布于 2020-08-30 10:20:50
您所做的设置状态是错误的，您需要这样做：
const changeHover = (val, bool) => {
console.log(val)
setBtn((prevstate) => prevstate.map((ele, id) =>
console.log("STATES", ele) || id === val
? { ...ele, hovered: bool }
: { ...ele }
));
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63656279
复制相关文章
相似问题
腾讯云开发者
