Introdução
Você pode obter um evento hover básico no React usando o CSS nativo: seletor hover, mas existem duas limitações que você pode encontrar:
Você não pode fazer mudanças ou alterar o seletor real: hover por meio de JavaScript. Você não pode usá-lo para mostrar outros componentes ao hover
Este artigo explica duas maneiras alternativas de superar essas limitações no React. O primeiro usará dois manipuladores de eventos suportados pelo React SyntheticEvent e o segundo empregará uma biblioteca npm chamada React Hover. O último permite que você mostre outros componentes ao passar o mouse.
Uma visão geral rápida dos eventos no React
O React lida com eventos que você normalmente escreveria em JavaScript vanilla, mas com algumas diferenças importantes:
Os manipuladores de eventos são nomeados usando a convenção camel-case. Por exemplo, onclick se torna onClick. Você não pode retornar false para evitar um comportamento padrão como faria em JavaScript; em vez disso, você deve chamar explicitamente preventDefault. Seus manipuladores de eventos recebem instâncias do SyntheticEvent
O que é SyntheticEvent?
SyntheticEvent é o wrapper cross-browser do React que envolve o evento nativo do navegador, o que permite que seus eventos funcionem de forma idêntica em todos os navegadores.
Eventos suportados
O React oferece suporte a uma variedade de tipos de SyntheticEvent, mas para este artigo, nossa principal preocupação é Eventos de mouse .
Os eventos de mouse disponíveis são listados no próximo bloco de código. Você notará conforme lê-los que não há onHover, o que permitiria a criação de um evento hover.
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseOnMouseOneOnMouse É sobre isso que estamos aqui para falar-e, felizmente, há uma solução alternativa.
Vamos dar uma olhada nisso na próxima seção.
Como criar eventos de foco usando SyntheticEvent
Nesta seção, demonstrarei como criar um evento de foco usando dois manipuladores de eventos suportados pelo SyntheticEvent do React. Eles são onMouseEnter e onMouseLeave.
Para esta demonstração, você criar uma dica de ferramenta , que é um elemento de IU cujo conteúdo é mostrado quando um usuário passa o mouse sobre um elemento de página da web.
Criando uma dica de ferramenta do React
Primeiro, você precisará configurar um projeto React se ainda não tiver um. Você pode criar um projeto React no CodeSandbox ou configurar um projeto local usando Create React App.
Para este artigo, irei pela última opção.
npm install create-react-app
Assim que a instalação for concluída, faça o seguinte:
Exclua o conteúdo de App.js e index.css Crie duas pastas dentro da pasta src e nomeie-as css e componente Dentro da pasta css, crie um novo arquivo chamado Tooltip.css Localize a pasta do componente criada anteriormente, crie um novo arquivo chamado Tooltip.js
Agora, em Tooltip.js, vamos escrever alguns códigos. Escreveremos o código para Tooltip.css posteriormente neste artigo.
Como o React permite que você escreva código baseado em componente, o código para a funcionalidade de dica de ferramenta principal seria, de fato, um componente.
O próximo bloco de código importa React, useState do React e o arquivo css que criamos anteriormente. Você precisará de useState para gerenciar o estado do aplicativo quando o usuário optar por visualizar a dica de ferramenta.
//src/components/Tooltip.js import React, {useState} de’react’import’../css/Tooltip.css’
Com essas instruções de importação fora do caminho, você pode começar a escrever o código que implementa a funcionalidade principal da dica de ferramenta. Esta funcionalidade principal residiria em um componente chamado Tooltip, que é uma função que retorna dados.
Neste caso, é uma função de seta.
//src/components/Tooltip.js import React , {useState} from’react’import’../css/Tooltip.css’const Tooltip=(props)=> {//Todo o código que fará a//dica de ferramenta funcionar reside aqui}
Dentro do Componente de dica de ferramenta, você fará o seguinte:
Configurar um cronômetro para determinar o intervalo de tempo entre quando a dica de ferramenta é mostrada e quando ela está oculta Configure o estado usando useState Escreva uma função para mostrar a dica de ferramenta Escreva uma função para oculte a dica de ferramenta Return JSX, que contém um elemento HTML de pai único e seus filhos. Este elemento HTML pai teria os manipuladores de eventos onMouseEnter e onMouseLeave anexados a ele Escreva o argumento para onMouseEnter, que será a função que mostra a dica de ferramenta Escreva o argumento de onMouseLeave, que será a função que oculta a dica de ferramenta Defina o elemento filho; ou seja, o conteúdo da dica de ferramenta teria um nome de classe e atributo que seria estilizado via CSS
Todas essas etapas são abordadas no próximo bloco de código.
//src/components/Tooltip.js//Código truncado , verifique o//bloco de código anterior. const Tooltip=(props)=> {//Todo o código que fará a//dica de ferramenta funcionar reside aqui//Configure o cronômetro e o estado let TooltipTimeout; const [activeToolTip, setActiveToolTip]=useState (false);//Escreva uma função para mostrar a dica de ferramenta const showToolTip=()=> {TooltipTimeout=setTimeout (()=> {setActiveToolTip (true);}, props.delay || 300); };//Escreva uma função para ocultar a dica de ferramenta const hideToolTip=()=> {setActiveToolTip (false); clearInterval (TooltipTimeout); };//Retorna JSX que contém os dados//HTML para a dica de ferramenta//Observe o uso dos 2 manipuladores de eventos//mencionados anteriormente neste artigo. Eles tornam//possível criar o evento de foco no React. return (
)}
); };//Exportar a dica de ferramenta exportar dica de ferramenta padrão
A dica de ferramenta agora está pronta para uso, mas antes de implementá-la, precisaremos importá-la para App.js (ou qualquer outro componente onde você achar útil ).
O próximo bloco de código faz o truque:
//App.js import React from”react”import Tooltip from’./components/Tooltip’; import’./index.css’; Const App=()=> {return (
)} exportar aplicativo padrão
E agora podemos passar para a estilização.
Estilizando nossa dica de ferramenta React
Mude para o Arquivo Tooltip.css e escreva o seguinte:
/* css/Tooltip.css *//** * O nome da classe CSS começa com uma * letra maiúscula para indicar que é um * componente. */.Tooltip-Container {posição: relativa; display: bloco embutido; }.Tooltip-Content {position: absolute; esquerda: 50%; preenchimento: 8px; cor: #ffffff; plano de fundo: # 1a1a1a; tamanho da fonte: 0.85em; raio da borda: 6px; transform: translateX (-50%); índice z: 1; espaço em branco: nowrap; }.Tooltip-Content:: before {left: 50%; posição: absoluta; contente:””; borda: 6px sólido transparente; margem esquerda:-6px; }.Tooltip-Content.top {top:-30px; }.Tooltip-Content.top:: before {top: 100%; cor da borda superior: # 1a1a1a; }/** * Os estilos a seguir são * variações da dica de ferramenta quando você * altera o valor do atributo”direção”* no componente App. */.Tooltip-Content.right {top: 50%; esquerda: calc (100% + 20px); transformar: traduzirY (-50%); }.Tooltip-Content.right:: before {top: 50%; esquerda:-6px; transformar: traduzirY (-50%); border-right-color: # 1a1a1a; }.Tooltip-Content.bottom:: before {bottom: 100%; cor da borda inferior: # 1a1a1a; }.Tooltip-Content.left {top: 50%; direita: calc (100% + 30px); esquerda: automático; transformar: traduzirY (-50%); }.Tooltip-Content.left:: before {top: 50%; direita:-12px; esquerda: automático; transformar: traduzirY (-50%); cor da borda esquerda: # 1a1a1a; }
Depois, mude para index.css, que ainda deve estar vazio, e escreva o seguinte:
/* index.css */.App {font-family:”Trebuchet MS”, Verdana, Genebra, Tahoma, sem serifa; acolchoamento superior: 16px; padding-right: 16px; acolchoamento inferior: 120px; padding-left: 16px; }.Tooltip-wrapper {padding: 16px 120px; }
Agora, quando você passa o mouse sobre o texto “Passe o mouse aqui”, a dica de ferramenta é exibida. Quando você move o mouse para longe do texto, a dica de ferramenta desaparece.
Ótimo! Você não só conseguiu isso apesar de o React não ter um método onHover padrão, mas também aproveitou dois manipuladores de eventos suportados pelo SyntheticEvent do React (onMouseEnter e onMouseLeave) para criá-lo. explicarei como fazer algo semelhante usando uma biblioteca npm chamada React Hover.
Crie eventos de foco usando React Hover
Conforme declarado em sua página oficial npm ,“ React Hover permite que você transforme qualquer coisa em um objeto’flutuante’. ” Esse “qualquer coisa” pode ser um HTML simples e antigo ou outro componente do seu aplicativo.
Antes de mergulharmos na sintaxe do React Hover e como ele funciona, vamos instalá-lo.
npm install–save react-hover
O comando acima instala o React Hover no diretório do seu projeto atual. Você pode verificar sua instalação bem-sucedida verificando seu arquivo package.json.
Agora, para a sintaxe.
A sintaxe do React Hover
O React Hover fornece o seguinte opções para criar um objeto “passível”:
Observação: se você preferir usar HTML puro com React Hover em vez de um componente, escreva o código HTML diretamente em
Implementando React Hover
Ok, chega de teoria-é hora de alguns códigos!
Crie dois arquivos em sua pasta de componentes , ou seja, TriggerComponent.js e HoverComponent.js. Mude para o seu editor e digite o próximo bloco de código em TriggerComponent.js:
//components/TriggerComponent.js import React from’react’const TriggerComponent=()=> {return (
Passe o mouse sobre mim
)} export default TriggerComponent
Em seguida, mude para HoverComponent.js e digite o seguinte:
//components/HoverComponent.js import React from’react’const HoverComponent=()=> {return (
Eu sou um componente hover.
)} export HoverComponent padrão
Com esses arquivos todos configurados, você pode usá-los em App.js ou em qualquer outro local em seu aplicativo. Lembre-se, no App.js, você escreverá o objeto que passará para o atributo options. Conforme declarado anteriormente, este objeto determinará o comportamento do componente pairado quando o cursor for movido sobre o componente
Dito isto, no próximo bloco de código, continuaremos com App. js:
//App.js import React from’react’import ReactHover, {Trigger, Hover} from’react-hover’import TriggerComponent from’./components/TriggerComponent’import HoverComponent from’./components/HoverComponent’//Defina a opção que determina a posição//e o comportamento do componente de foco const OptionsCursorTrueWithMargins={followCursor: true, shiftX: 20, shiftY: 0}//A função do aplicativo const App=()=> { return (
Salve seus arquivos, adicione um estilo para atender às suas necessidades e teste-o em seu navegador da web. Você deve ter algo semelhante ao GIF abaixo.
Conclusão
Este artigo cobre duas boas opções disponíveis em seu arsenal quando você pretende criar eventos hover no React. A primeira opção usa dois manipuladores de eventos suportados pelo SyntheticEvent do React, e a segunda opção incorpora React Hover , uma biblioteca JavaScript disponível no registro npm.
