Estoy creando un cuadro de texto que hace clic en Intro o cambia el texto a SVG al hacer clic en el espacio. Sin embargo, reaccionar solo considera la primera declaración if, usar else funciona, pero else if se ignora por completo.
código de cuadro de texto:
<input type="text" id="textbox" contentEditable="true" className="grinputbox" onChange={(e) => {setInput(e.target.value)}} onKeyPress={twoCalls} />Función de dos llamadas:
const twoCalls = (e) => { if (e.key === "Enter") { console.log("enter"); handleClick() } else if (e.key === "Space") { console.log("space"); toSVG() } }La consola inicia sesión al presionar enter, sin embargo, no hay espacio al presionar espacio
No existe una propiedad key como "Space" . El valor contra el que se debe verificar si un usuario presiona la tecla de espacio es un carácter de espacio literal: " " . Puede encontrar esto directamente desde https://keycode.info/ (espacio de prensa), o indirectamente desde la documentación de MDN . (La parte que dice "Si la tecla presionada tiene una representación impresa, el valor devuelto es una cadena de caracteres Unicode no vacía que contiene la representación imprimible de la tecla").
Así que en resumen, reemplace
else if (e.key === "Space" )con
else if (e.key === " " )e.key , e.code en key , algunos navegadores devuelven espacio como " " y en algunos navegadores antiguos lo devuelven como "Spacebar" . Si desea la mayor compatibilidad con el espacio con key , puede hacerlo de la siguiente manera if(e.key === "Enter") { //Some code } else if(e.key === " " || e.key === "Spacebar") { //Some code }e.code que devolverá el espacio como Space si desea usar Space , puede hacer que su código sea así if(e.key === "Enter") { //Some code } else if(e.code === "Space") { //Some code }e.key aquí hay una lista con valores clavee.keyCode que está en desuso, así que evita usarloCreo que es por esto: e.key === 'Space' debería ser e.key === 'Spacebar' .