javascript - 无法识别 reactJS 框架 mouseOver 和 mouseEnter，但 onClick 工作正常

Question

我的代码:

import React, {useState} from 'react';




function HeaderNavbar() {
  console.log("HeaderNavbar: starting");

 var [isMouseEnter, setMouseEnter] = React.useState(0);
  console.log("HeaderNavbar: isMouseEnter set to [" + isMouseEnter + "]");

function SetDivToDefault (defaultTileName, eventAction) {
  var divToChangeDefault ="";
  console.log("SetDivToDefault: NOT [" + eventAction + " | " + defaultTileName + "]");
  // default style is the same for all events

  divToChangeDefault = document.getElementById(defaultTileName);
  console.log("SetDivToDefault - changing backgroundcolor to grey for [" + eventAction + " | " + defaultTileName + "]");
  divToChangeDefault.style.backgroundColor = 'grey';
  divToChangeDefault.style.fontFamily = 'londrinaSketcheRegular';
  divToChangeDefault.style.color = '#98d6ea';
} // end function SetDivToDefault 

    // function SetAllTileStyles sets and returns all the tileStyles after a user event (Click, MouseEnter, MouseLeave);
    function SetAllTileStyles(eventTileName, eventAction) {
      console.log("SetAllTileStyles: Called with ["+ eventTileName + "|"  + eventAction + "]");


      if (eventAction = "Clicked") {
        switch (eventTileName) {
          case "Tile1":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            var divToChange = document.getElementById('Tile1');
            divToChange.style.backgroundColor = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color = 'yellow';

             // set remaining tiles to default
             SetDivToDefault("Tile2", eventAction);
             SetDivToDefault("Tile3", eventAction);
             SetDivToDefault("Tile4", eventAction);
             SetDivToDefault("Tile5", eventAction);           
          break; // end of Case Tile1

          case "Tile2":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            divToChange = document.getElementById('Tile2');
            divToChange.style.backgroundColor = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color = 'yellow';

             // set remaining tiles to default
             SetDivToDefault("Tile1", eventAction);
             SetDivToDefault("Tile3", eventAction);
             SetDivToDefault("Tile4", eventAction);
             SetDivToDefault("Tile5", eventAction);           
             break; // end of Case Tile2

          case "Tile3":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            divToChange = document.getElementById('Tile3');
            divToChange.style.backgroundColor = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color =  'yellow';

             // set remaining tiles to default
             SetDivToDefault("Tile1", eventAction);
             SetDivToDefault("Tile2", eventAction);
             SetDivToDefault("Tile4", eventAction);
             SetDivToDefault("Tile5", eventAction);          
          break; // end of Case Tile3

          case "Tile4":
            console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
            divToChange = document.getElementById('Tile4');
            divToChange.style.backgroundColor  = 'blue';
            divToChange.style.fontFamily = 'londrinaBlackRegular';
            divToChange.style.color = 'yellow';

            SetDivToDefault("Tile1", eventAction);
            SetDivToDefault("Tile2", eventAction);
             SetDivToDefault("Tile3", eventAction);
             SetDivToDefault("Tile5", eventAction);          
          break; // end of Case Tile4


          case "Tile5":
               console.log("SetAllTileStyles [" + eventTileName + "] for [" + eventAction + "]");
              divToChange = document.getElementById('Tile5');
              divToChange.style.backgroundColor = 'blue';
               divToChange.style.fontFamily = 'londrinaBlackRegular';
               divToChange.style.color = 'yellow';

                // set remaining tiles to default
                SetDivToDefault("Tile1", eventAction);
                SetDivToDefault("Tile2", eventAction);
                SetDivToDefault("Tile3", eventAction);
                SetDivToDefault("Tile4", eventAction);
          break; // end of Case Tile5 

          default:
            console.log("SetAllTileStyles: default Case activated");
          } // end of Case Tile5


        }// end 0f eventAction = "Clicked"   

        console.log("SetAllTileStyles: tileStyles set for all tiles -  End of Function");       
    } // end of function SetAllTileStyles


    // continuation of function HeaderNavbar

    function HandleClick(event, AllTileStyles) {
      console.log("HandleClick: started - getting event for [" + event.target.id + "]");

      // getting the tile which was clicked
      var tileName = event.target.id; 
      console.log("HandleClick: Calling function SetAllStyles for [" + tileName + "]");
      // Call SetAllTileStyles to set styles following event Click/MouseEnter/MouseLeave
      AllTileStyles = (SetAllTileStyles(tileName, "Clicked"));
      console.log("HandleClick: SetAllTileStyles  returned to function HeaderNavbar.");
    } // end of function HandleClick


    function HandleMouseEnter(event) {
      console.log("HandleMouseEnter: started - isMouseEnter is [" + isMouseEnter + "] getting event for [" + event.target.id + "]");
      var tileName = event.target.id;
      var divToChange = "";
      setMouseEnter(1);
      console.log("HandleMouseEnter: After setting to [1] isMouseEnter is [" + isMouseEnter + "]");
      console.log(isMouseEnter = 1 ? "HandleMouseEnter: isMouseEnter value is [1]" :  "HandleMouseEnter: isMouseEnter value is [" + isMouseEnter + "]");
      divToChange = document.getElementById(tileName);
      console.log("HandleMouseEnter: setting bgColor for element [" + divToChange.id + "]");
      divToChange.style.backgroundColor = '#465881';
      console.log("HandleMouseEnter: bgColor changed for element [" + divToChange.id + "] - changing font");
      divToChange.style.fontFamily = 'londrinaBlackRegular';
      console.log("HandleMouseEnter: font changed for element [" + divToChange.id + "] - changing color");
      divToChange.style.color = '#A6DCEF';
      console.log("HandleMouseEnter: color changed for element [" + divToChange.id + "] - setting mouseEnter to false");
      setMouseEnter(0);
      console.log("HandleMouseEnter: isMouseEnter for element [" + divToChange.id + "] set to [", isMouseEnter + "] - end of function HandleMouseEnter");
    }  // end of function HandleMouseEnter


    function HandleMouseLeave(event) {
      console.log("HandleMouseLeave: started - getting event for [ " + event.target.id + "]");
      var tileName = event.target.id; 
      setMouseEnter(0);
      SetAllTileStyles(tileName, "mouseLeave");

    }  // end of function HandleMouseLeave

    return ( 
      <div>     
        <div className= "flex-container-header">
          <div id="Tile1" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Home</div>           
          <div id="Tile2" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>About</div>          
          <div id="Tile3" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Technology</div>  
          <div id="Tile4" className= "linkcontainer" onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Marketing</div>          
          <div id="Tile5"className= "linkcontainer"  onClick={HandleClick} onMouseEnter={HandleMouseEnter} onMouseLeave={HandleMouseLeave}>Modules</div>  
       </div> 
      </div>     
    ) // end of Return Statement

} // end function HeaderNavbar


export default HeaderNavbar;

在 Chrome 开发者工具中，当光标移到其中一个链接容器磁贴上时没有响应。什么都没有发生。但是，当我单击其中一个图 block 时，它会同时识别单击和被单击图 block 的 mouseEnter，但仅在单击之后。

我也尝试了 mouseOver - 结果相同。

我在某处读到需要状态更改才能使 mouseEnter/Over 生效，但状态更改发生在事件处理程序语句中:setMouseEnter(1);

另一个奇怪的问题是错误消息“第 1:17 行:'useState' 已定义但从未使用过。

但它在主函数 HeaderNavbar 中使用:var [isMouseEnter, setMouseEnter] = React.useState(0);

除非必须，否则我不想在 CSS 中处理它。

热烈欢迎任何建议:-)

Answer 1

您可能需要使用匿名函数来使 onMouseEnter 和 onMouseLeave 正常工作。尝试做类似这样的事情:

<div id="Tile1" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Home</div>           
<div id="Tile2" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>About</div>          
<div id="Tile3" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Technology</div>  
<div id="Tile4" className= "linkcontainer" onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Marketing</div>          
<div id="Tile5"className= "linkcontainer"  onClick={HandleClick} onMouseEnter={(e) => HandleMouseEnter(e)} onMouseLeave={(e) => HandleMouseLeave(e)}>Modules</div>

此外，由于您使用解构导入了 useState，因此您无需通过执行 React.useState 来调用它。只需使用 useState，您的警告就会消失 :)

编辑:再看一遍，我发现这个 if 语句有一个错误:

if (eventAction = "Clicked") {

应该有 2 个等号而不是 1 个(或 3 个等号用于严格相等检查)。