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

Question

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

Answer 1

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

Answer 2

优化代码

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>
    );
  }
}

Live demo