onKeyPress em React

1. onKeyPress em React
2. onKeyPress vs onKeyDown no React
3. onKeyDown em React

onKeyPress faz parte da interface para campos de texto. Ele pode ser usado em todas as principais estruturas de JavaScript, incluindo React. Este manipulador de eventos pode ser útil quando você deseja executar uma função sempre que os usuários digitarem uma letra, um número ou qualquer outra coisa em seus campos. Você também pode especificar qual tecla deve acionar a execução de um evento.

onKeyPress em React

De acordo com a documentação oficial do MDN, o evento onKeyPress está obsoleto. Os desenvolvedores da MDN não recomendam usá-lo. No entanto, não perca a esperança - há uma alternativa viável, que discutiremos em seções posteriores do artigo.

Se você quiser ir com o evento obsoleto onKeyPress, veja como lidar com o evento onKeyPress no React.

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyPress = (e) => {
      if (e.key === 'Enter') {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyPress = {
      this.handleKeyPress
    } />
         </div>);
  }
}

Esta solução funciona no React versão 0.14.7 e no playground React playcode.io.

Esta solução usa um atributo denominado key para verificar se o usuário pressionou a tecla Enter ou não.

if (e.key === 'Enter') {
  console.log('You must have pressed Enter ')
}

Alternativamente, você também pode usar os atributos charCode ou charKey para disparar o evento depois que o usuário pressiona uma tecla específica. Novamente, vamos ver como podemos verificar condicionalmente se o usuário pressionou a tecla Enter, que tem um charCode de 13.

Exemplo de código:

if (e.charCode === 13) {
  console.log('You must have pressed Enter ')
}

Se você substituiu a condicional usada anteriormente por esta, o resultado seria o mesmo. Na verdade, a propriedade charCode é mais segura de usar, porque é mais amplamente suportada em navegadores do que os atributos nomeados de key.

O atributo keyCode é menos previsível. No exemplo acima, se nós console.log(e.keyCode), veremos um 0. Isso ocorre porque alguns novos ambientes de codificação não o suportam. Se você encontrar esse problema ao codificar um aplicativo, pode usar charCode como alternativa.

onKeyPress vs onKeyDown no React

onKeyPress foi preterido pelos desenvolvedores de HTML. No outono de 2021, muitos dos principais navegadores ainda o suportam, mas assim que as novas versões do navegador forem lançadas, o suporte para onKeyPress diminuirá. Portanto, a menos que você tenha um motivo muito específico para usar onKeyPress, use onKeyDown, que faz basicamente a mesma coisa, com pequenas diferenças.

O evento keyPress dispara apenas para as teclas do teclado que produzem valores alfanuméricos. Isso inclui todas as letras, números, pontuação e teclas usadas para digitar espaços. As teclas modificadoras, como Alt, Shift ou Ctrl não podem disparar o evento onKeyPress.

onKeyDown é disparado sempre que qualquer uma das teclas é pressionada. Não há diferença entre as chaves que produzem valores alfanuméricos e aquelas que não. Pressionar as teclas do teclado como Backspace e Caps Lock gerará o evento onKeyDown, mas não onKeyPress.

onKeyDown em React

Exceto pelas pequenas diferenças mencionadas acima, o evento onKeyDown é essencialmente o mesmo que onKeyPress. A diferença mais importante é que atualmente é suportado em todos os principais navegadores e terá suporte nos próximos anos.

onKeyDown também é mais consistente, independentemente de qual versão do React você usa.

Veja como a mesma solução funcionaria com onKeyDown:

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyDown = (e) => {
      if (e.keyCode === 13) {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyDown = {
      this.handleKeyDown
    } />
         </div>);
  }
}

Observe que para verificar a chave que disparou o evento onKeyDown, usamos a propriedade keyCode, que não era acessível com onKeyPress.

if (e.keyCode === 13) ```

Da mesma forma, também podemos usar o atributo denominado `key`:

```javascript
if (e.key === 'Enter') ```

De qualquer forma, se selecionarmos a entrada e clicarmos em <kbd>Enter</kbd> duas vezes, nosso console ficará assim:

![onKeyDown em React](</img/React/console-onKeyDown.webp>)