Javascript 如何为悬停效果管理单个react元素的状态？

我试图在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>

优化代码

let arr = [
  { id: "one", href: "/", icon: faHome, name: "Home" },
  { id: "two", href: "/about", icon: faUser, name: "About" },
  { id: "three", href: "/skills", icon: faCog, name: "Skills" },
  { id: "four", href: "/gallery", icon: faEye, name: "Gallary" },
  { id: "five", href: "/contact", icon: faEnvelope, name: "Contact" }
];
class App extends React.Component {
  state = {
    isHover: false
  };

  onMouseEnterHandler = selected => {
    console.log(selected);
    this.setState({
      isHover: selected
    });
  };

  render() {
    return (
      <div className="info-box-top">
        {arr.map(a => (
          <a key={a.id}
            onMouseEnter={() => this.onMouseEnterHandler(a)}
            id={a.id}
            href={a.href}
          >
            {this.state.isHover.id === a.id ? (
              <span>{a.name}</span>
            ) : (
              <FontAwesomeIcon icon={a.icon} />
            )}
          </a>
        ))}
      </div>
    );
  }
}

---

您只能通过css来管理它，但如果您希望它管理表单javascript，则可以管理每个元素的状态。请查看我的代码沙盒链接以获取参考。

---

老实说，你应该使用。这能回答你的问题吗@AsiaArgento1检查根据您的要求创建的此解决方案谢谢！！非常感谢。这正是我想要的wanted@AsiaArgento1如果这对你有帮助，请接受/投票支持。