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.

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.