Neste artigo você aprenderá a como implementar o evento onKeyPress no React, que é muito importante para pegar dados de input

Evento onKeyPress no React capa

Fala prgoramador(a), beleza? Bora aprender mais sobre React JS!

Os eventos são uma parte fundamental do desenvolvimento web.

No React, trabalhar com eventos é um pouco diferente em comparação com o JavaScript puro, mas não menos poderoso.

Uma das necessidades comuns é detectar a pressão de teclas, seja para criar atalhos, controlar formulários ou outras interações baseadas em teclado.

Neste artigo, vamos explorar como implementar o evento onKeyPress no React JS e algumas práticas recomendadas relacionadas a ele.

Entendendo o Evento onKeyPress

O que é onKeyPress?

O evento onKeyPress é acionado quando um usuário pressiona uma tecla enquanto um elemento específico está focado.

Este evento é comumente associado a elementos de input, mas pode ser usado em qualquer elemento interativo.

onKeyPress vs onKeyDown e onKeyUp

Além do onKeyPress, temos outros dois eventos relacionados à interação com o teclado: onKeyDown e onKeyUp.

Enquanto onKeyDown é disparado no momento em que uma tecla é pressionada (antes de ser liberada), onKeyUp ocorre quando a tecla é solta.

O onKeyPress é uma espécie de meio-termo, sendo disparado após onKeyDown, mas antes de onKeyUp.

No entanto, é importante notar que onKeyPress detecta apenas teclas que produzem um caractere (como letras, números e alguns símbolos), ao contrário de onKeyDown e onKeyUp que detectam todas as teclas.

Implementando onKeyPress no React

Uso básico

Aqui está um exemplo simples de como usar o onKeyPress em um componente funcional no React:

import React from 'react';

function InputComKeyPress() {
  const manipuladorKeyPress = (evento) => {
    if(evento.charCode === 13) {
      alert('Enter foi pressionado!');
    }
  };

  return <input type="text" onKeyPress={manipuladorKeyPress} />;
}

Neste exemplo, o alerta será exibido sempre que a tecla “Enter” for pressionada no input.

Acessando o valor do input

Muitas vezes, queremos obter o valor atual do input quando uma tecla é pressionada. Podemos fazer isso de forma direta:

import React from 'react';

function InputComKeyPress() {
  const manipuladorKeyPress = (evento) => {
    if(evento.charCode === 13) {
      alert(`O valor digitado foi: ${evento.target.value}`);
    }
  };

  return <input type="text" onKeyPress={manipuladorKeyPress} />;
}

Melhores Práticas e Considerações

Uso de constantes para códigos de teclas

No exemplo acima, usamos o número 13, que representa o código da tecla “Enter”. Para tornar o código mais legível, é uma boa prática usar constantes:

const TECLA_ENTER = 13;

// ...

if(evento.charCode === TECLA_ENTER) {
  // ...
}

Evite ações indesejadas

Ao trabalhar com eventos de teclado em formulários, certifique-se de que pressionar teclas como “Enter” não cause ações indesejadas, como o envio acidental do formulário.

Acessibilidade

Lembre-se de que nem todos os usuários interagem com sua aplicação usando um teclado.

Sempre considere a acessibilidade ao desenvolver interações baseadas em teclado, garantindo que haja outras maneiras de alcançar a mesma funcionalidade.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre como fazer o evento onKeyPress no React!

O evento onKeyPress é uma ferramenta valiosa para criar interações ricas e responsivas baseadas em teclado no React.

Com ele, podemos melhorar a experiência do usuário, oferecendo atalhos úteis e feedback imediato.

No entanto, como com todas as ferramentas, é importante usá-lo de maneira responsável e sempre considerando a experiência do usuário final, incluindo aqueles que podem não usar um teclado para interagir com sua aplicação.

Com as práticas e técnicas apresentadas neste artigo, você está pronto para implementar interações eficientes e acessíveis baseadas em teclado em seus projetos React.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments