Reaccionar: cómo agregar el nombre de clase onHover

En este tutorial, aprenderemos cómo agregar el nombre de la clase a un elemento al pasar el mouse en reaccionar.

Considere que tenemos el siguiente componente en nuestra aplicación React:

import React from 'react';

function Home(){
    return (
        <div>
          <h1>Welcome to my blog</h1>
        </div>
    )
}

export default Home;

Para agregar el nombre de clase de un elemento al elemento flotante, agregue el onMouseOver y onMouseOut manejador de eventos y cambia el nombre de la clase condicionalmente cada vez que se pasa el mouse sobre un elemento.

Aquí un ejemplo:

import React, { useState } from "react";

function Home() {
  const [active, setActive] = useState(false);

  const handleMouseOver = () => {
    setActive(true);
  };

  const handleMouseOut = () => {
    setActive(false);
  };


  return (
    <div>
       <h1
         onMouseOver={handleMouseOver}
         onMouseOut ={handleMouseOut}
         className={{active ? "container" : "box" }}
       >Welcome to my blog</h1>
    </div>
  );
}

export default Home;

En el ejemplo anterior, agregamos un handleMouseOver y handleMouseOut gerentes de eventos en onMouseOver, onMouseOut accesorios y estado active a className propiedad.

Así, cada vez que un h1 se pasa el cursor sobre el elemento, ejecuta el handleMouseOver función y cambia la active estado de false a true y agrega el container nombre de la clase.

Cada vez que un ratón se aleja del h1 elemento que agrega el box nombre de la clase.

Basado en active declaramos que estamos cambiando el h1 nombre de clase del elemento usando una expresión ternaria.

{{active ? "container" : "box" }}

Si activo es false el elige el box clase, si es verdad, elige la container clasificar.

Referencias

Si quieres conocer otros artículos parecidos a Reaccionar: cómo agregar el nombre de clase onHover puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas