Neste artigo você aprenderá a como implementar o evento onKeyPress no React, que é muito importante para pegar dados de input
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.