时间戳

首页 > 解决方案 > 如何管理单个反应元素的状态以实现悬停效果？

javascript - 如何管理单个反应元素的状态以实现悬停效果？

问题描述

我正在尝试在 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>

标签： javascriptcssreactjshoverjsx

解决方案

您只能通过 css 管理它，但如果您希望它管理表单 javascript，则可以管理每个单独元素的状态。请检查我的代码和框链接以供参考。 https://codesandbox.io/s/react-example-1nyfs

推荐阅读