props - Escuche la pulsación de teclas para documentos en reactjs
redireccionar a otra pagina react (4)
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.
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.
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
El evento de pulsación de tecla se activa cuando se presiona una tecla y esa tecla normalmente produce un valor de carácter
El evento keydown se activa cuando se presiona una tecla.
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>; }
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í!