props - Escuche la pulsación de teclas para documentos en reactjs

redireccionar a otra pagina react

Question

Quiero vincular para cerrar el popover de arranque de reacción activo en la prensa de escape Aquí está el código

_handleEscKey:function(event){
console.log(event);
if(event.keyCode == 27){
this.state.activePopover.hide();
}
},
componentWillMount:function(){
BannerDataStore.addChangeListener(this._onchange);
document.addEventListener("click", this._handleDocumentClick, false);
document.addEventListener("keyPress", this._handleEscKey, false);
},
componentWillUnmount: function() {
BannerDataStore.removeChangeListener(this._onchange);
document.removeEventListener("click", this._handleDocumentClick, false);
document.removeEventListener("keyPress", this._handleEscKey, false);
},

Pero nada se registra en la consola cuando presiono cualquier tecla. He tratado de escuchar eso en la ventana también y con diferentes casos. ''Presionar'', ''keyup'', etc. pero parece que estoy haciendo algo mal.

Answer 1

Acabo de tener un problema similar con esto yo mismo. Usaré tu código para ilustrar una solución.

// for other devs who might not know keyCodes
var ESCAPE_KEY = 27;
_handleKeyDown = (event) => {
switch( event.keyCode ) {
case ESCAPE_KEY:
this.state.activePopover.hide();
break;
default:
break;
}
},
// componentWillMount deprecated in React 16.3
componentDidMount(){
BannerDataStore.addChangeListener(this._onchange);
document.addEventListener("click", this._handleDocumentClick, false);
document.addEventListener("keydown", this._handleKeyDown);
},
componentWillUnmount() {
BannerDataStore.removeChangeListener(this._onchange);
document.removeEventListener("click", this._handleDocumentClick, false);
document.removeEventListener("keydown", this._handleKeyDown);
},

Dado que está utilizando la forma de hacer las cosas createClass, no necesita vincularse a ciertos métodos, ya que this está implícito en cada método definido.

Hay un jsfiddle que funciona, usando el método createClass de creación de componentes React here.

Answer 2

Debes usar keydown y no keydown keypress .

La pulsación de teclas generalmente se usa solo para teclas que producen una salida de caracteres según los documentos

Keypress

El evento de pulsación de tecla se activa cuando se presiona una tecla y esa tecla normalmente produce un valor de carácter

Keydown

El evento keydown se activa cuando se presiona una tecla.

Answer 3

Si puede usar React Hooks, un buen enfoque es useEffect , por lo que el detector de eventos se suscribirá solo una vez y se cancelará correctamente cuando el componente esté desmontado.

El siguiente ejemplo fue extraído de https://usehooks.com/useEventListener/ :

 <div
tabindex="0"
onClick={()=> update(item.id)}
onKeyDown={()=> update(item.id)}
>
{renderItem(item)}
</div>

También puede instalarlo desde npm, por ejemplo, npm i @use-it/event-listener .

Luego, para usarlo en su componente, solo tiene que llamarlo dentro de su componente funcional pasando el nombre del evento y el controlador. Por ejemplo, si desea console.log cada vez que se presiona la tecla Escape:

const ESCAPE_KEYS = [''27'', ''Escape'']; const App = () => { function handler({ key }) { if (ESCAPE_KEYS.includes(String(key))) { console.log(''Escape key pressed!''); } } useEventListener(''keydown'', handler); return <span>hello world</span>; }

Answer 4

Tenía los mismos requisitos para un div que podía tabularse.

El siguiente código para mí estaba dentro de una llamada a items.map ((item) => ...

<div tabindex="0" onClick={()=> update(item.id)} onKeyDown={()=> update(item.id)} > {renderItem(item)} </div>

¡Esto funcionó para mí!