时间戳

首页 > 解决方案 > 尝试使用 React 在我的导航上的图标和文本之间切换

reactjs - 尝试使用 React 在我的导航上的图标和文本之间切换

问题描述

我有一些代码，它可以工作，但我的问题是，当我只滚动一个图标时，它会同时更改所有图标。我只想要我悬停在上面的图标来改变，所以任何帮助都将不胜感激。

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {isHovered: false};
    this.toggleHover = this.toggleHover.bind(this);
  }

  toggleHover() {
    this.setState(prevState => ({isHovered: !prevState.isHovered}));
  }

  render() {
    return (
          <section className="info-section">
            <div className="logo">
              MATT
            </div>
            <div className="info-box">
              <ul className="nav-links">
                <li onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
                  {this.state.isHovered
                    ? <a className="home active" href="/">Home</a>
                    : <a className="home active" href="/"><FontAwesomeIcon icon={faHome} /></a>
                  }
                </li>
                <li onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
                  {this.state.isHovered
                    ? <a href="/about">About</a>
                    : <a href="/about"><FontAwesomeIcon icon={faUser} /></a>
                  }
                </li>

标签： reactjshovericonstogglejsx

解决方案

也许你可以尝试使用 CSS。

<ul className="nav-links">
  <li>
    <a href="/">
      <span>Home</span>
      <FontAwesomeIcon icon={faHome} />
    </a>
  </li>
  <li>
    <a href="/about">
      <span>Home</span>
      <FontAwesomeIcon icon={faUser} />
    </a>
  </li>
  ...

a {
  span {
    display: none;
  }

  &:hover {
    span {
      display: block;
    }
    /* hide the icon base on their html tag or class */
    i {
      display: none;
    }
  }
}

如果你真的想通过 Javascript 来处理这个问题（我不建议这样做），你可以试试这个。

class App extends Component {
  state = {
    hover: ""
  };
  handleMouseEnter = key => {
    this.setState({ hover: key });
  };
  handleMouseLeave = () => {
    this.setState({ hover: "" });
  };

  render() {
    const { hover } = this.state;
    return (
      <ul>
        <li
          onMouseEnter={() => this.handleMouseEnter("home")}
          onMouseLeave={this.handleMouseLeave}
        >
          <a href="/">
            {hover === "home" ? <span>Hover Home</span> : <span>Home</span>}
          </a>
        </li>
        <li
          onMouseEnter={() => this.handleMouseEnter("about")}
          onMouseLeave={this.handleMouseLeave}
        >
          <a href="/about">
            {hover === "about" ? <span>Hover about</span> : <span>about</span>}
          </a>
        </li>
      </ul>
    );
  }
}

推荐阅读