我假设您正在 React 组件中编写此代码。如:
class Welcome extends React.Component {
render() {
return (
<img src={require('../../../common/assets/network-inactive.png')}
onMouseOver={this.src = require('../../../common/assets/network.png')}
onMouseOut={this.src = require('../../../common/assets/network-inactive.png')}
/>
);
}
}
this.src
在这种情况下,定位将不起作用,因为您实际上是在寻找src
类中命名的东西。例如this.src
可以找到这样的东西:
src = () => (alert("a source"))
但这不是你想要做的。您想要定位图像本身。
因此,您需要输入<img />
上下文。您可以像这样轻松地做到这一点:
<img
onMouseOver={e => console.log(e)}
/>
从那里,您可以定位该currentTarget
属性等。这将进入元素的上下文。所以现在你可以做这样的事情:
<img
src="img1"
onMouseOver={e => (e.currentTarget.src = "img2")}
/>
可以对onMouseOut
.
您可以在其他元素上使用相同的方法,因为您肯定需要再次执行此操作。但要小心,因为这不是唯一的解决方案。在较大的项目中,您可能需要考虑使用商店 ( Redux ),并传递props而不是改变元素。