Como Implementar o Evento onKeyPress no React JS

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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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.

Qual dos três eventos usar em cada caso:

Ficou na dúvida de qual escolher? Se liga na regra prática

Se o que tu precisa é o caractere que a pessoa digitou (letra, número, símbolo), o onKeyPress dá conta do recado

Agora, se o atalho envolve uma tecla que NÃO gera caractere (Escape, setas, Tab, Backspace), o onKeyPress simplesmente não dispara, e aí você fica meia hora olhando pro console achando que quebrou o componente

Já me ferrei uma vez por causa disso, hehe

Nesse cenário o certo é o onKeyDown, que enxerga todas as teclas

E o onKeyUp? Ele é o amigo de quem quer reagir DEPOIS que a tecla é solta: validar o que ficou escrito no campo, atualizar um contador de caracteres, mostrar um aviso de senha fraca, por aí vai

Resumindo numa linha só:

caractere digitado, onKeyPress

atalho e tecla especial, onKeyDown

reação depois do toque, onKeyUp 🙂

Por que meu onKeyPress não está disparando?

Tome cuidado com esses quatro tropeços, que respondem por quase todo "não funciona" com evento de teclado no React

1) O elemento não está focado

O evento nasce do elemento em foco, então se o usuário não clicou (ou não navegou por Tab) até o campo, não vem nada

2) Você colocou o evento num elemento que não recebe foco

Input e textarea recebem foco por natureza

Uma div ou um span, não

Se o teu handler está numa div e nada acontece, o problema não é o handler

3) A tecla que você está testando não gera caractere

Como já vimos ali em cima, o onKeyPress ignora Escape, setas e companhia

Teste com uma letra pra ter certeza de que o handler está vivo antes de sair caçando bug

4) Você CHAMOU a função em vez de passar ela

Esse é clássico:

[bloco de código: onKeyPress={manipuladorKeyPress()} está errado, com os parênteses a função roda na renderização; o certo é onKeyPress={manipuladorKeyPress}]

Com os parênteses, o React executa a função na hora que monta o componente e guarda o RETORNO dela como se fosse o teu evento

Sem os parênteses, você entrega a função pro React chamar na hora certa

Detalhe pequeno, dor de cabeça grande

O caso mais comum disso é o input dentro de um formulário

Ao apertar Enter, o formulário tenta enviar sozinho, e o teu handler de tecla acaba brigando com esse comportamento padrão

O resultado costuma ser a página recarregando do nada, e a pessoa achando que a aplicação bugou

Quando o Enter faz parte da tua interação (buscar, adicionar item numa lista, confirmar), a saída é tratar o envio no próprio formulário e impedir o comportamento padrão dele, em vez de depender só do evento de teclado

Regra de bolso: se existe um form em volta, decida quem manda no Enter ANTES de escrever o handler

Senão você vai debugar duas coisas ao mesmo tempo

Na prática, acessibilidade em interação por teclado se resume a três checagens rápidas

A primeira: o elemento que escuta a tecla é alcançável navegando por Tab? Se só dá pra chegar nele com o mouse, metade do público perdeu a funcionalidade

A segunda: existe um caminho alternativo pra mesma ação? Se o Enter salva o formulário, tem que existir um botão de salvar visível também

Atalho é atalho, não é a única porta

A terceira: a pessoa recebe algum retorno visual do que aconteceu? Um alert resolve no exemplo didático, mas em aplicação de verdade o feedback tem que aparecer na tela, perto de onde a ação foi disparada

É um checklist de trinta segundos que evita retrabalho lá na frente