[英]Change image on hover in JSX
How do I change an image on hover
in JSX如何在 JSX 中
hover
更改图像
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.我假设您正在 React 组件中编写此代码。 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.在这种情况下,定位
this.src
将不起作用,因为您实际上是在类中寻找名为src
东西。 For instance this.src
could find something like this:例如
this.src
可以找到这样的东西:
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.因此,您需要输入
<img />
上下文。 You can do that easily like this:你可以像这样轻松地做到这一点:
<img
onMouseOver={e => console.log(e)}
/>
From there you can target the currentTarget
property, among others.从那里您可以定位
currentTarget
属性等。 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
.对
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.
在较大的项目中,您可能需要考虑使用商店 ( Redux ),并传递道具而不是改变元素。
Best is to manage this in the state:最好是在状态中管理这个:
class App extends Component {
state = {
img: "https://i.vimeocdn.com/portrait/58832_300x300"
}
render() {
return (
<div style={styles}>
<img
src={this.state.img}
onMouseEnter={() => {
this.setState({
img: "http://www.toptipsclub.com/Images/page-img/keep-calm-and-prepare-for-a-test.png"
})
}}
onMouseOut={() => {
this.setState({
img: "https://i.vimeocdn.com/portrait/58832_300x300"
})
}}
/>
</div>
)
}
};
https://codesandbox.io/s/5437qm907l https://codesandbox.io/s/5437qm907l
Here's a non-class approach using a functional component and typescript:这是使用功能组件和打字稿的非类方法:
interface IconProps {
src?: string;
srcOnHover?: string;
alt?: string;
}
const Icon: React.FC<IconProps> = ({ src, srcOnHover, alt }) => (
<img
src={src}
alt={alt}
onMouseOver={(e): void => {
srcOnHover && (e.currentTarget.src = srcOnHover);
}}
onMouseOut={(e): void => {
srcOnHover && (e.currentTarget.src = src || '');
}}
/>
);
It can be used like that:它可以这样使用:
<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />
simple way to do this:这样做的简单方法:
class Home extends React.Component { state = { icon: ICON_ONE } class Home 扩展 React.Component { state = { icon: ICON_ONE }
render(){ return( <img src={this.state.icon} onMouseOver={()=>this.setState({icon:ICON_TWO})} render(){ return( <img src={this.state.icon} onMouseOver={()=>this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ icon: ICON_ONE })} /> ) } onMouseOut={() => this.setState({ icon: ICON_ONE })} /> ) }
Another non-class approach:另一种非类方法:
import arrow from "../images/arrow.svg";
import arrowHover from "../images/arrowHover.svg";
function Arrow() {
const [over, setOver] = useState(false);
return (
<div
onMouseOver={() => setOver(true)}
onMouseOut={() => setOver(false)}
>
<img
src={over ? arrowHover : arrow}
alt="arrow"
width="50"
height="50"
/>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.