在 JSX 中悬停时更改图像
Change image on hover in JSX
如何在 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
在这种情况下不起作用,因为您实际上是在 class 中寻找名为 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),并传递道具而不是改变元素。
最好是管理这个状态:
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>
)
}
};
这是一种使用功能组件和打字稿的非class方法:
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 || '');
}}
/>
);
可以这么用:
<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />
简单的方法:
class 主页扩展 React.Component {
状态={
图标:ICON_ONE
}
渲染(){
return(
<图片
源={this.state.icon}
onMouseOver={()=>this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ icon: ICON_ONE })}
/>
)
}
另一种非class方法:
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>
)
}
如何在 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
在这种情况下不起作用,因为您实际上是在 class 中寻找名为 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),并传递道具而不是改变元素。
最好是管理这个状态:
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>
)
}
};
这是一种使用功能组件和打字稿的非class方法:
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 || '');
}}
/>
);
可以这么用:
<Icon src="path/to/image.png" srcOnHover="path/to/hover-image.png" alt="Description" />
简单的方法:
class 主页扩展 React.Component { 状态={ 图标:ICON_ONE }
渲染(){
return(
<图片
源={this.state.icon}
onMouseOver={()=>this.setState({icon:ICON_TWO})}
onMouseOut={() => this.setState({ icon: ICON_ONE })}
/>
)
}
另一种非class方法:
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>
)
}