我正在尝试在 React 中为我的投资组合网站设置一个简单的“图标到文本”悬停效果。当我设置它时,它会更改悬停时的所有图标,我只想一次更改一个图标。
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
isHover: false
};
this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
}
onMouseEnterHandler() {
this.setState({
isHover: true
});
}
onMouseLeaveHandler() {
this.setState({
isHover: false
});
}
render() {
return (
<div className="home">
<div className="hamburger-icon"></div>
<section className="info-section">
<div className="logo">M</div>
<div className="info-box-top">
<a onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler} className="home active" id="one" href="/">
{ this.state.isHover
? <span>Home</span>
: <FontAwesomeIcon icon={faHome} />
}
</a>
<a id="two" href="/about"><FontAwesomeIcon icon={faUser} /></a>
<a id="three" href="/skills"><FontAwesomeIcon icon={faCog} /></a>
<a id="four" href="/gallery"><FontAwesomeIcon icon={faEye} /></a>
<a id="five" href="/contact"><FontAwesomeIcon icon={faEnvelope} /></a>
</div>
最佳答案
您只能通过 css 管理它,但如果您希望它管理表单 javascript,那么您可以管理每个单独元素的状态。请检查我的 codesandbox 链接以供引用。 https://codesandbox.io/s/react-example-1nyfs
关于javascript - 如何在悬停效果的单个 react 元素上管理状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59573355/