reactJS framework mouseOver и mouseEnter не распознаются, хотя onClick работает нормально - PullRequest
Новая
       35

reactJS framework mouseOver и mouseEnter не распознаются, хотя onClick работает нормально

3 голосов
/ 18 июня 2020

Мой код: 

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, но это изменение состояния происходит в операторе обработчика событий: setMouseEnter (1);

Еще одна странная проблема - сообщение об ошибке «Строка 1: 17: useState определен, но никогда не используется.

И все же он используется в основной функции HeaderNavbar: var [isMouseEnter, setMouseEnter] = React.useState (0);

Я не Не хочу разбираться с этим в CSS, если мне не нужно.

Любые предложения тепло приветствуются: -)

Ответы [ 2 ]

1 голос
/ 30 июня 2020

Проблема решена!

Кажется, что при работе Chrome средств разработки событие MouseEnter не распознается. Если я закрою инструменты разработчика, все будет нормально. Если я снова открою инструменты разработчика, MouseEnter перестанет работать.

Какое разочарование это было ...

Я зарегистрировал отчет об ошибке с помощью Chrome.

1 голос
/ 18 июня 2020

Возможно, вам придется использовать анонимные функции, чтобы заставить 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, и ваше предупреждение должно быть go прочь :)

Изменить: при втором взгляде я обнаружил ошибку с этим оператором if:

if (eventAction = "Clicked") {

Должно быть 2 знака равенства вместо 1 (или 3 знака равенства для строгой проверки на равенство).

...