如何在 ReactJS 中启用悬停

Question

我这里有用 ReactJS 编写的代码。

import React, { Component } from "react";

class Sidebar extends Component {
  state = {
    hovered: false
  };

  onMouseOver = e => {
    this.setState({ hovered: true });
  };

  render() {
    const { hovered } = this.state;
    if (hovered) {
      return (
        <div
          className="flex-container justify-content-end"
          style={{
            display: "flex",
            textDecoration: "none",
            listStyleType: "none"
          }}
          onMouseOver={this.onMouseOver}
        >
          <div className="col-sm-12 col-md-4">
            <ul className="nav flex-column nav-pills">
              <li
                className="nav-item"
                style={{ padding: "0.5em", backgroundColor: "#809fff" }}
              >
                {" "}
                <a
                  href="prva_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  PRVA DIVIZIJA
                </a>
              </li>
              <li
                className="nav-item"
                style={{
                  padding: "0.5em"
                }}
              >
                {" "}
                <a
                  href="druga_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DRUGA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="treca_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  TRECA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="cetvrta_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  CETVRTA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="peta_divizija.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  PETA DIVIZIJA
                </a>
              </li>
              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="divizija_tuzla.html"
                  style={{
                    backgroundColor: "#809fff",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA TUZLA
                </a>
              </li>

              <li className="nav-item" style={{ padding: "0.5em" }}>
                <a
                  href="divizija_sarajevo.html"
                  style={{
                    backgroundColor: "#ff6666",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA SARAJEVO
                </a>
              </li>

              <li
                className="nav-item"
                style={{
                  padding: "0.5em"
                }}
              >
                <a
                  href="divizija_bugojno.html"
                  style={{
                    backgroundColor: "#ff6666",
                    borderRadius: "15px",
                    color: "white"
                  }}
                  className="nav-link"
                  onMouseOver={this.onMouseOver}
                >
                  DIVIZIJA BUGOJNO
                </a>
              </li>
            </ul>
          </div>
        </div>
      );
    }

https://pastebin.com/zYQ4rFxE

当我将鼠标悬停在标签上时，代码应该会悬停。但由于某种原因它不起作用。我可以寻求有关此解决方案的指导吗？我不要求完成的解决方案。

Answer 1

据我所知，react 没有元素的hovered 状态（就像 CSS 一样）。但是，您可以使用 onMouseEnter 和 onMouseLeave 事件来确定您的事件是否被悬停并相应地更新状态

有关示例实现，请参阅此答案：react show button on mouse enter