Je veux me lier pour fermer le popover de réaction actif sur escape
appuyez sur. Voici le code
_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);
},
Mais rien ne devient connecté à la console lorsque j'appuie sur une touche. J'ai essayé d'écouter cela sur la fenêtre également et avec différents cas.'Keypress ',' keyup 'etc.
Vous devez utiliser keydown
et non keypress
.
Keypress est généralement utilisé uniquement pour les clés qui produisent une sortie de caractères conformément à la documentation.
L'événement de frappe est déclenché lorsqu'une touche est enfoncée et cette touche produit normalement une valeur de caractère
L'événement keydown est déclenché lorsqu'une touche est enfoncée.
Je viens d'avoir un problème similaire avec cela moi-même. Je vais utiliser votre code pour illustrer un correctif.
// 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);
},
Comme vous utilisez la méthode createClass, vous n'avez pas besoin de vous lier à certaines méthodes, car this
est implicite dans chaque méthode définie.
Il y a un jsfiddle qui fonctionne, utilisant la méthode createClass de création de composant React ici.
J'avais les mêmes exigences pour une div que l'on pouvait tabuler.
Le code suivant pour moi était à l'intérieur d'un appel à items.map ((item) => ...
<div
tabindex="0"
onClick={()=> update(item.id)}
onKeyDown={()=> update(item.id)}
>
{renderItem(item)}
</div>
Cela a fonctionné pour moi!