Como chamar onChange com Enter em React JS

Neste artigo você aprenderá a como chamar onChange com Enter em React JS, ou seja, ativar o evento onChange com enter

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

O Básico do Evento de Tecla

No React, os eventos de teclado são representados pelo evento sintético onKeyPress, onKeyDown ou onKeyUp.

Para detectar especificamente a tecla “Enter”, podemos verificar a propriedade key ou keyCode do evento.

Exemplo Simples:

function InputComEnter() {
  const verificarTecla = (evento) => {
    if (evento.key === 'Enter') {
      console.log("Tecla 'Enter' pressionada!");
    }
  };

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

No exemplo acima, toda vez que a tecla “Enter” é pressionada, uma mensagem é exibida no console.

Integrando com onChange

Agora, digamos que queremos integrar a detecção da tecla “Enter” com uma função onChange.

O objetivo é atualizar o estado do componente quando o usuário digita e, ao pressionar “Enter”, realizar uma ação adicional, como enviar os dados.

Exemplo Prático:

import React, { useState } from 'react';

function CaixaDeBusca() {
  const [texto, setTexto] = useState('');

  const handleInputChange = (evento) => {
    setTexto(evento.target.value);
  };

  const handleKeyPress = (evento) => {
    if (evento.key === 'Enter') {
      enviarBusca();
    }
  };

  const enviarBusca = () => {
    console.log("Buscando por:", texto);
  };

  return (
    <div>
      <input 
        type="text" 
        value={texto} 
        onChange={handleInputChange} 
        onKeyPress={handleKeyPress} 
        placeholder="Digite e pressione Enter..." 
      />
      <button onClick={enviarBusca}>Buscar</button>
    </div>
  );
}

Neste componente CaixaDeBusca, o usuário pode tanto pressionar o botão “Buscar” quanto pressionar a tecla “Enter” para iniciar uma busca.

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

Otimizando com Hooks Personalizados

Podemos ir além e criar um hook personalizado para lidar com a detecção da tecla “Enter”, tornando nosso código mais reutilizável.

Exemplo com Hook Personalizado:

import React, { useState } from 'react';

function useEnter(tecla = 'Enter') {
  const [pressionado, setPressionado] = useState(false);

  const handleKeyPress = (evento) => {
    if (evento.key === tecla) {
      setPressionado(true);
    } else {
      setPressionado(false);
    }
  };

  return [pressionado, handleKeyPress];
}

function CaixaDeBuscaOtimizada() {
  const [texto, setTexto] = useState('');
  const [enterPressionado, verificarEnter] = useEnter();

  const handleInputChange = (evento) => {
    setTexto(evento.target.value);
  };

  if (enterPressionado) {
    console.log("Buscando por:", texto);
  }

  return (
    <input 
      type="text" 
      value={texto} 
      onChange={handleInputChange} 
      onKeyPress={verificarEnter} 
      placeholder="Digite e pressione Enter..." 
    />
  );
}

O hook personalizado useEnter verifica se a tecla “Enter” foi pressionada e retorna um valor booleano correspondente.

Isso torna nosso código mais limpo e modular.

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

Conclusão

Chegamos ao fim do artigo sobre como chamar onChange com Enter em React!

Facilitar para que os usuários interajam com sua aplicação é uma prática recomendada para melhorar a usabilidade.

Ao permitir que a tecla “Enter” acione eventos em React JS, proporcionamos uma experiência mais fluida e intuitiva.

Seja através de métodos simples ou com a ajuda de hooks personalizados, o React nos oferece as ferramentas necessárias para implementar essas interações de maneira otimizada e eficaz.

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

onKeyDown, onKeyUp ou onKeyPress: qual escolher?

Os três parecem a mesma coisa, mas eles disparam em momentos diferentes

onKeyDown roda no instante em que a tecla desce

onKeyUp só roda quando você solta a tecla

Se você já mexeu com mousedown e mouseup no JavaScript puro, é exatamente a mesma lógica, só que pro teclado 🙂

Na prática, pra ação de "apertou Enter, envia", o onKeyDown costuma ser o mais confortável: a ação acontece na hora, sem esperar o dedo sair da tecla

E tem outro detalhe que pega muita gente: Escape, setas e Tab não são teclas de caractere

Se seu componente precisa reagir a elas (fechar um modal com Escape, navegar numa lista de sugestões com as setas), o onKeyDown te atende no mesmo handler

[bloco de código] const handleKeyDown = (evento) => { if (evento.key === ‘Enter’) { enviarBusca() }

if (evento.key === ‘Escape’) { setTexto(”) } }

<input value={texto} onChange={handleInputChange} onKeyDown={handleKeyDown} />

Repara que a checagem é sempre a mesma: olha o evento.key e decide o que fazer

E se o input estiver dentro de um formulário?

Aqui mora o bug clássico

Quando o input está dentro de um form, o navegador já tem um comportamento próprio pro Enter: ele tenta enviar o formulário

Aí acontece aquilo, a página pisca, recarrega e você jura que o React quebrou 😅

A saída é tratar o envio no onSubmit do form e chamar o preventDefault

[bloco de código] function CaixaDeBuscaComForm() {

const handleSubmit = (evento) => { evento.preventDefault() console.log(‘Buscando por:’, texto) }

return ( <form onSubmit={handleSubmit}> <input type="text" value={texto} onChange={(evento) => setTexto(evento.target.value)} placeholder="Digite e pressione Enter…" /> <button type="submit">Buscar</button> </form> ) }

Repara que aqui você nem precisa checar a tecla: o próprio form entende o Enter e o clique no botão pelo mesmo caminho

Menos código, e de quebra o teclado e o leitor de tela seguem funcionando como o usuário espera =)

Tome cuidado: se você já usa form e AINDA assim escuta a tecla no input, a ação pode rodar duas vezes

Enter envia e Shift + Enter quebra linha (o padrão de chat):

Esse é o comportamento que todo mundo espera numa caixa de mensagem

E dá pra resolver com uma condição só, olhando o evento.shiftKey

[bloco de código] const handleKeyDown = (evento) => { if (evento.key === ‘Enter’ && !evento.shiftKey) { evento.preventDefault() enviarMensagem() } }

<textarea value={texto} onChange={(evento) => setTexto(evento.target.value)} onKeyDown={handleKeyDown} />

O preventDefault ali é o que impede a quebra de linha de sobrar no textarea depois do envio

Sem ele a mensagem vai embora e ainda fica um "enter fantasma" no campo, com o cursor na linha de baixo

Com shiftKey pressionado o handler não faz nada, então o textarea quebra a linha normalmente

Melhorando o hook: passe a ação em vez de guardar um booleano

Um detalhe que morde quem usa o hook do jeito acima: guardar "apertou Enter" no estado te obriga a lembrar de voltar esse valor pra false depois

Se esquecer, a ação dispara de novo a cada nova renderização do componente

Um jeito mais tranquilo é o hook não guardar nada e só receber o que fazer quando o Enter chegar

[bloco de código] function useEnter(aoPressionar, tecla = ‘Enter’) { return (evento) => { if (evento.key === tecla) { aoPressionar(evento) } } }

function CaixaDeBuscaOtimizada() { const verificarEnter = useEnter(() => console.log(‘Buscando por:’, texto))

return ( <input type="text" value={texto} onChange={(evento) => setTexto(evento.target.value)} onKeyDown={verificarEnter} placeholder="Digite e pressione Enter…" /> ) }

Mesmo resultado, sem estado extra pra sincronizar

E o hook passa a servir pra qualquer tela: busca, login, filtro, o que aparecer

Já me ferrei uma vez com a versão booleana, a busca disparava sozinha e eu procurando bug em tudo quanto é lugar menos ali haha

E se eu não quiser atualizar o estado a cada tecla?

Pergunta justa: o onChange dispara a cada letra digitada

Na maioria das telas isso não pesa nada, mas em formulário grande, ou quando cada mudança dispara um cálculo pesado, dá pra segurar

Duas saídas simples

A primeira é ler o valor direto do evento na hora do Enter, sem guardar estado nenhum

[bloco de código] const handleKeyDown = (evento) => { if (evento.key === ‘Enter’) { console.log(‘Buscando por:’, evento.target.value) } }

<input type="text" onKeyDown={handleKeyDown} placeholder="Digite e pressione Enter…" />

A segunda é manter o onChange só pra guardar o texto e deixar a parte cara (chamada de API, filtro pesado) acontecer apenas no Enter, que é exatamente o que a CaixaDeBusca lá de cima faz

Escolhe pelo que a tela precisa, não por dogma =)