reactJS框架mouseOver和mouseEnter无法识别，虽然onClick工作正常答案

【问题标题】：reactJS framework mouseOver and mouseEnter are not recognised, though onClick works finereactJS框架mouseOver和mouseEnter无法识别，虽然onClick工作正常
【发布时间】：2020-10-07 23:46:00
【问题描述】：

我的代码：

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 开发人员工具中，当光标移到链接容器磁贴之一上时没有响应。什么都没有发生。但是，当我单击其中一个图块时，它会同时识别单击的图块的单击和 mouseEnter，但仅在单击之后。

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

我在某处读到需要更改状态才能使 mouseEnter/Over 生效，但该状态更改发生在 eventhandler 语句中：setMouseEnter(1);

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

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

除非必须，否则我不想在 CSS 中处理这个问题。

热烈欢迎任何建议:-)

【问题讨论】：

标签： javascript reactjs mouseenter use-state

【解决方案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 个等号用于严格相等检查）。

【讨论】：

嗨，阿卜杜拉。感谢您的提示-我将在今天晚些时候尝试。关于 useState，当我收到 useState 已定义但从未使用过的错误时，我将其更改为 react.useState。我会把它改回来，但我认为它不会有任何区别。
遗憾的是，改变没有任何区别。我只在这个阶段更改了 Tile1 的 DIV 代码。但是，直到单击不同的图块后，才会识别 Tile1 的 mouseEnter。如果我将鼠标悬停在 Tile 1 上，则不会发生任何事情。当我单击 tile 3 时，它会运行 Tile 3 的 handleMouseEnter 代码，然后运行 Tile 3 的 handleclick 代码。它完全忽略了 Tile1 ... useState“未使用”警告现在已经消失了:-)
这很奇怪，您的原始代码似乎对我有用。也许有一个外部的东西弄乱了鼠标事件？ codesandbox.io/s/quirky-kapitsa-wy0jo 编辑：我刚刚对我的原始答案进行了编辑。请看一下，看看是否可以解决您的问题:)
谢谢阿卜杜拉，我会去看看。昨天我确实注意到了一件很奇怪的事情。我修改了 onMouseEnter 例程，像我一样犯了一个错误。我无意中更改了“var tileName = event.target.id;”中的代码到 var tileName = event.id;这导致了崩溃，但不是在 onMouseEnter 例程运行之前。我不知道该怎么做。也许在检索事件时存在一些问题？无论如何，我会检查沙盒。感谢您指出 Clicked 的问题 - 该例程实际上工作正常，但我将添加额外的 = 符号以确保完整性。
是的，它似乎在代码沙箱中运行良好！控制台日志显示它正在做应该做的事情。我将不得不仔细梳理应用程序代码 - 这会很愚蠢，比如标点符号错误......

【解决方案2】：

问题已解决！

Chrome 开发工具运行时似乎无法识别 MouseEnter 事件。如果我关闭开发工具，一切正常。如果我再次打开开发工具，MouseEnter 将不再工作。

这是多么令人沮丧...

我已经用 Chrome 记录了一个错误报告。

【讨论】：