How to specify only one element in onMouseEnter functions in REACTJS

Asked

Viewed 49 times

-1

I need to make that when we pass the mouse (Hover) on a link, it is shown only one object, not several.

My code below:

    import React from "react";
    import { NavLink } from "react-router-dom";

   //importando components estilizados
   import { NavUl, NavLi, Plug45Deg } from "./style/menuStyle";

class Menu extends React.Component {
  constructor(props) {
    super(props);



    //estados 
    this.state = {
      isHovered: false
    };
  }

  handleEnter() {
    this.setState({
      isHovered: true
    });
  }

  handleLeave() {
    this.setState({
      isHovered: false
    });
  }
  render() {
    return (
      <nav>
        <NavUl>
          <NavLi
            onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
          >
            {this.state.isHovered ? <Plug45Deg /> : <div />}
            <NavLink to="/">Home</NavLink>
          </NavLi>
          <NavLi
            onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
          >
            {this.state.isHovered ? <Plug45Deg /> : <div />}
            <NavLink to="/sobre">Sobre</NavLink>
          </NavLi>
          <NavLi
            onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
          >
            {this.state.isHovered ? <Plug45Deg /> : <div />}
            <NavLink to="/portfolio">Portfólio</NavLink>
          </NavLi>
          <NavLi
            onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
          >
            {this.state.isHovered ? <Plug45Deg /> : <div />}
            <NavLink to="/blog">Blog</NavLink>
          </NavLi>
          <NavLi
            onMouseEnter={this.handleEnter.bind(this)}
            onMouseLeave={this.handleLeave.bind(this)}
          >
            {this.state.isHovered ? <Plug45Deg /> : <div />}
            <NavLink to="/contato">Contato</NavLink>
          </NavLi>
        </NavUl>
      </nav>
    );
  }
}

export default Menu;

Resultado do código acima.

javascript react

  • Says William, which objects are wanting to appear and which ones are appearing.. I could not understand very well.

  • Daniel, next... this plug icon is the element I wanted to appear only one at a time, on each menu item with Hover, however, when I hover over.. appears 1 element on top of each item, all at once!

  • Guilherme, is because you have only one state for all components. You could give an ID for each one or even name and compare, you know? I’ll try to put something together here and answer.

1 answer

0


William, the state is for all components. You need to test otherwise using a component name. I’ll try to reproduce your code with the instructions:

import React from "react";
    import { NavLink } from "react-router-dom";

   //importando components estilizados
   import { NavUl, NavLi, Plug45Deg } from "./style/menuStyle";

class Menu extends React.Component {
    //estados
    state = {
      isHovered: "",
    };
  }
  // usando arrow functions não precisa fazer o bind
  handleEnter = (name) => {
    this.setState({
      isHovered: name
    });
  }

  handleLeave = () => {
    this.setState({
      isHovered: "",
    });
  }
  render() {
    return (
      <nav>
        <NavUl>
          <NavLi
            onMouseEnter={() => this.handleEnter('home')}
            onMouseLeave={() => this.handleLeave()}
          >
            {this.state.isHovered === 'home' ? <Plug45Deg /> : <div />}
            <NavLink to="/">Home</NavLink>
          </NavLi>
          ...
        </NavUl>
      </nav>
    );
  }
}

export default Menu
  • 1

    Perfect... worked here! now just iterate this and take from an array the route data... thanks

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.