问题描述
如何在JSX中的hover
上更改图像
我正在尝试这样的事情:
<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')} />
我假设您正在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 ),并传递道具而不是变异元素. /p>
How do I change an image on hover
in JSX
I'm trying something like this:
<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')} />
I will assume you are writing this code in a React component. Such as:
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')}
/>
);
}
}
Targeting this.src
will not work in this case as you are essentially looking for something named src
in your class. For instance this.src
could find something like this:
src = () => (alert("a source"))
But that is not what you want to do. You want to target the image itself.
Therfore you need to enter the <img />
context. You can do that easily like this:
<img
onMouseOver={e => console.log(e)}
/>
From there you can target the currentTarget
property, among others. This will enter the context of your element. So now you can do something like this:
<img
src="img1"
onMouseOver={e => (e.currentTarget.src = "img2")}
/>
The same can be done for onMouseOut
.
You can use this same method on your other elements, as you will certainly need to do this again. But be careful as this is a not the only solution. On bigger projects you may want to consider using a store (Redux), and passing props rather than mutating elements.
这篇关于在JSX中更改悬停图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!