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>

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
this.state={isHovered:false}；
this.toggleHover=this.toggleHover.bind（this）；
}
切换悬停（）{
this.setState（prevState=>（{isHovered:！prevState.isHovered}））；
}
render（）{
返回(
马特


{this.state.isHovered
? 
: 
}


{this.state.isHovered
? 
: 
}

也许你可以尝试使用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;
    }
  }
}

...
a{
跨度{
显示：无；
}
&：悬停{
跨度{
显示：块；
}
/*基于html标记或类隐藏图标*/
我{
显示：无；
}
}
}

如果你真的想通过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>
    );
  }
}

类应用程序扩展组件{
状态={
悬停：“
};
HandleMouseCenter=key=>{
this.setState（{hover:key}）；
};
handleMouseLeave=（）=>{
this.setState（{hover:”“}）；
};
render（）{
const{hover}=this.state；
返回(

this.handleMouseCenter（“home”）}
onMouseLeave={this.handleMouseLeave}
>

this.handleMouseCenter（“about”）}
onMouseLeave={this.handleMouseLeave}
>


);
}
}

Hi，从您发送的代码中，我们可以看到有两个图标，对吗？问题是，您将两个图标与您的状态链接

ishored

，每次您悬停其中一个图标时，它都会更改状态

ishored

，但您的两个图标都会对组件的状态做出反应。如果要更改特定的图标，您需要在在您设置图标之前。有人能帮我解决这个问题吗？我不知道如何向元素添加ID。@AsiaArgento1我添加了另一个示例。