onKeyPress en React

1. onKeyPress en React
2. onKeyPress vs onKeyDown en React
3. onKeyDown en React

onKeyPress es parte de la interfaz para campos de texto. Se puede utilizar en todos los principales marcos de JavaScript, incluido React. Este controlador de eventos puede ser útil cuando desea ejecutar una función cada vez que los usuarios escriben una letra, un número o algo más en sus campos. También puede especificar qué tecla debe activar la ejecución de un evento.

onKeyPress en React

Según Documentación oficial sobre MDN, el evento onKeyPress está obsoleto. Los desarrolladores de MDN no recomiendan su uso. Sin embargo, no pierda la esperanza: existe una alternativa viable, que discutiremos en secciones posteriores del artículo.

Si desea utilizar el evento obsoleto onKeyPress, aquí le mostramos cómo manejar el evento onKeyPress en 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 solución funciona en React versión 0.14.7, y en playcode.io React playground.

Esta solución utiliza un atributo de tecla con nombre para comprobar si el usuario presionó la tecla Enter o no.

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

Alternativamente, también puede usar los atributos charCode o charKey para activar el evento después de que el usuario presione una tecla específica. De nuevo, veamos cómo podemos comprobar condicionalmente que el usuario ha pulsado la tecla Enter, que tiene un charCode de 13.

Ejemplo de código:

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

Si reemplaza el condicional usado anteriormente con este, el resultado sería el mismo. De hecho, la propiedad charCode es más segura de usar, porque es más compatible con los navegadores que los atributos denominados key.

El atributo keyCode es menos predecible. En el ejemplo anterior, si console.log(e.keyCode), veremos un 0. Esto se debe a que algunos entornos de codificación nuevos no lo admiten. Si encuentra este problema mientras codifica una aplicación, puede usar charCode como alternativa.

onKeyPress vs onKeyDown en React

onKeyPress fue desaprobado por los desarrolladores de HTML. En otoño de 2021, muchos de los principales navegadores todavía lo admiten, pero una vez que se publiquen las versiones más nuevas del navegador, el soporte para onKeyPress disminuirá. Entonces, a menos que tenga una razón muy específica para usar onKeyPress, use onKeyDown en su lugar, que hace básicamente lo mismo, con ligeras diferencias.

El evento keyPress se dispara solo para las teclas del teclado que producen valores alfanuméricos. Estos incluyen todas las letras, números, puntuación y teclas que se utilizan para escribir espacios. Las teclas modificadoras, como Alt, Shift o Ctrl no pueden disparar el evento onKeyPress.

onKeyDown se activa cada vez que se presiona cualquiera de las teclas. No hay diferencia entre las claves que producen valores alfanuméricos y las que no. Al presionar las teclas del teclado como Retroceso y Bloqueo de mayúsculas se generará el evento onKeyDown, pero no onKeyPress.

onKeyDown en React

Excepto por las pequeñas diferencias mencionadas anteriormente, el evento onKeyDown es esencialmente lo mismo que onKeyPress. La diferencia más importante es que actualmente es compatible con todos los navegadores principales y seguirá siendo compatible en los próximos años.

onKeyDown también es más consistente, independientemente de la versión de React que uses.

Así es como funcionaría la misma solución con 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>);
  }
}

Tenga en cuenta que para verificar la clave que disparó el evento onKeyDown, usamos la propiedad keyCode, a la que no se podía acceder con onKeyPress.

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

Del mismo modo, también podemos utilizar el atributo `key` denominado:

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

De cualquier manera, si seleccionamos la entrada y hacemos clic en <kbd>Enter</kbd> dos veces, así se verá nuestra consola:

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