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!