Como utilizar o evento keypress no React JS

Neste artigo você vai aprender a como utilizar o evento keypress no React, utilizando uma abordagem simples e fácil

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

O evento keypress é um evento do JavaScript que é disparado quando uma tecla é pressionada.

Ele pode ser usado para detectar quando um usuário pressiona uma tecla em um elemento de entrada, como um input ou textarea.

No React, podemos usar o evento keypress em um componente funcional da mesma forma que usaríamos em um componente de classe.

Aqui está um exemplo de como fazer isso:

function MyComponent(props) {
  function handleKeyPress(event) {
    console.log(event.key);
  }

  return (
    <input onKeyPress={handleKeyPress} />
  );
}

O evento keypress é passado para a função de manipulador de eventos como um parâmetro.

Dentro da função, podemos acessar a tecla pressionada através da propriedade key do objeto de evento.

Aqui está outro exemplo que mostra como usar o evento keypress para detectar quando o usuário pressiona a tecla Enter em um componente funcional:

function MyComponent(props) {
  function handleKeyPress(event) {
    if (event.key === 'Enter') {
      console.log('The Enter key was pressed!');
    }
  }

  return (
    <input onKeyPress={handleKeyPress} />
  );
}

Também é possível passar parâmetros para a função de manipulador de eventos.

Por exemplo, aqui está um exemplo de como passar um valor de entrada para a função de manipulador de eventos quando o usuário pressiona a tecla Enter:

function MyComponent(props) {
  function handleKeyPress(inputValue, event) {
    if (event.key === 'Enter') {
      console.log(`The value entered was: ${inputValue}`);
    }
  }

  return (
    <input
      onKeyPress={event => handleKeyPress(event.target.value, event)}
    />
  );
}

Neste exemplo, estamos passando o valor de entrada atual como um primeiro parâmetro para a função de manipulador de eventos e o objeto de evento como um segundo parâmetro.

Isso nos permite acessar o valor de entrada e a tecla pressionada dentro da função.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo você como utilizar o evento keypress no React

Basta utilizar o evento onKeyPress em um elemento como props

Isso faz com que o elemento passe a escutar o evento keypress, e aí podemos desenvolver uma lógica em cima disso

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

<h2>E se o input estiver dentro de um form?</h2>

Aqui mora um erro clássico

Tu monta o handler do Enter certinho, testa, e a página inteira recarrega do nada

Não é o React quebrando

É o comportamento padrão do HTML: apertar Enter num input dentro de um form dispara o envio do formulário, e o navegador recarrega tudo

A saída é chamar event.preventDefault() dentro do teu handler, antes de rodar a lógica que tu quer

Assim a tecla continua sendo escutada e o navegador para de tentar enviar a página

Faça o teste com e sem, a diferença fica na cara 🙂

<h2>Por que o valor do input chega defasado?</h2>

Repara no exemplo acima: a gente manda event.target.value junto com o objeto de evento

Aí vem a pegadinha

O keypress dispara no momento em que a tecla é pressionada, ou seja, antes do input terminar de atualizar o valor dele

O que chega no teu handler é o texto que estava ali ANTES daquela tecla

Digita ‘oi’ e olha o console: na hora do ‘i’, ele ainda te mostra ‘o’

Tome cuidado com isso, é o tipo de coisa que faz o dev caçar bug a tarde inteira num bug que nem bug era

Se o que tu precisa é o texto completo no momento da tecla, alimenta uma variável de estado pelo onChange e lê essa variável dentro do handler quando a tecla que interessa for pressionada

<h2>keypress, keydown ou keyup: qual usar?</h2>

A diferença começa pelo momento em que cada um dispara

keydown é no instante em que tu aperta a tecla

keyup é quando tu solta

E o keypress é o que a gente usou aqui, ligado ao ato de digitar

Mas o detalhe que pega todo mundo é que nem toda tecla se comporta igual entre eles

Em vez de decorar tabela, faça o teste: pega o primeiro exemplo do post, deixa o console aberto e vai apertando Esc, seta pra cima e Backspace

Depois troca o onKeyPress por onKeyDown no mesmo input e repete a bateria

O que aparecer (e o que NÃO aparecer) no console já te responde qual evento serve pro teu caso, sem achismo

<h2>E pra escutar a tecla na página inteira?</h2>

Tudo que a gente fez até aqui vale pro elemento

O handler só roda quando aquele input está em foco

Se a ideia é atalho de teclado valendo na tela toda (tipo apertar uma tecla e abrir uma busca), a lógica muda de lugar: em vez de prender o handler no elemento, tu registra o listener no documento quando o componente entra na tela

E aqui vai o cuidado que muita gente esquece: tem que remover esse listener quando o componente sai da tela

Se não remover, cada vez que a tela monta de novo tu empilha mais um listener, e daqui a pouco o mesmo atalho dispara três, quatro vezes seguidas

É um bug silencioso, não quebra nada na hora, só vai ficando estranho

<h2>E se o input estiver dentro de um form?</h2>

Aqui mora um erro clássico

Tu monta o handler do Enter certinho, testa, e a página inteira recarrega do nada

Não é o React quebrando

É o comportamento padrão do HTML: apertar Enter num input dentro de um form dispara o envio do formulário, e o navegador recarrega tudo

A saída é chamar event.preventDefault() dentro do teu handler, antes de rodar a lógica que tu quer

Assim a tecla continua sendo escutada e o navegador para de tentar enviar a página

Faça o teste com e sem, a diferença fica na cara 🙂

<h2>Por que o valor do input chega defasado?</h2>

Repara no exemplo acima: a gente manda event.target.value junto com o objeto de evento

Aí vem a pegadinha

O keypress dispara no momento em que a tecla é pressionada, ou seja, antes do input terminar de atualizar o valor dele

O que chega no teu handler é o texto que estava ali ANTES daquela tecla

Digita ‘oi’ e olha o console: na hora do ‘i’, ele ainda te mostra ‘o’

Tome cuidado com isso, é o tipo de coisa que faz o dev caçar bug a tarde inteira num bug que nem bug era

Se o que tu precisa é o texto completo no momento da tecla, alimenta uma variável de estado pelo onChange e lê essa variável dentro do handler quando a tecla que interessa for pressionada

<h2>keypress, keydown ou keyup: qual usar?</h2>

A diferença começa pelo momento em que cada um dispara

keydown é no instante em que tu aperta a tecla

keyup é quando tu solta

E o keypress é o que a gente usou aqui, ligado ao ato de digitar

Mas o detalhe que pega todo mundo é que nem toda tecla se comporta igual entre eles

Em vez de decorar tabela, faça o teste: pega o primeiro exemplo do post, deixa o console aberto e vai apertando Esc, seta pra cima e Backspace

Depois troca o onKeyPress por onKeyDown no mesmo input e repete a bateria

O que aparecer (e o que NÃO aparecer) no console já te responde qual evento serve pro teu caso, sem achismo

<h2>E pra escutar a tecla na página inteira?</h2>

Tudo que a gente fez até aqui vale pro elemento

O handler só roda quando aquele input está em foco

Se a ideia é atalho de teclado valendo na tela toda (tipo apertar uma tecla e abrir uma busca), a lógica muda de lugar: em vez de prender o handler no elemento, tu registra o listener no documento quando o componente entra na tela

E aqui vai o cuidado que muita gente esquece: tem que remover esse listener quando o componente sai da tela

Se não remover, cada vez que a tela monta de novo tu empilha mais um listener, e daqui a pouco o mesmo atalho dispara três, quatro vezes seguidas

É um bug silencioso, não quebra nada na hora, só vai ficando estranho