如何在 ReactJS 中启用悬停

Posted 2023-02-22

【中文标题】如何在 ReactJS 中启用悬停

【英文标题】：How to enable hover in ReactJS

【发布时间】：2020-03-04 09:02:42

【问题描述】：

我这里有用 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

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

【问题讨论】：

How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over的可能重复

【参考方案1】：

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

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