intercepter les événements de keydown dans les composants internes en utilisant rea-keydown

Question

J'utilise la bibliothèque reac-keydown pour ajouter des raccourcis clavier à mon application, mais je ne peux pas la faire fonctionner dans les composants de boîtes de dialogue internes. Les boîtes de dialogue ne sont pas toujours visibles, mais je m'attends à ce que les touches fonctionnent lorsqu'elles sont visibles. Je suis en train de event_handlers.js._onKeyDown (événement) méthode, mais avec une valeur manquante: fn = non défini, alors que fn doit contenir la fonction décorée.

Mes composants ressemble:

<Container> 
    <MyDialog> 
     <material-ui-dialog/> 
    </MyDialog> 
</Container> 

Container.js:

import keydown from 'react-keydown' 
class Container extends Component { 
    @keydown('enter') 
    someMethod1(){ 
     // working 
    } 
    render() { 
     return (
     <div> 
      <MyDialog/> 
     </div> 
    ) 
    } 
} 

MyDialog.js:

import keydown, {keydownScoped} from 'react-keydown' 
@keydown('enter') 
class MyDialog extends Component { 
    @keydownScoped('enter') 
    someMethod3(){ 
     // not working 
    } 
} 

Answer 1

D'après votre description dans les commentaires, le problème semble soit que vos composants Dialog se montent, puis perdent le focus afin que les raccourcis clavier à l'intérieur de ceux-ci ne reçoivent pas la frappe s. Vous avez quelques options:

1) Développez la portée de la liaison de touches en décochant un composant qui est un ancêtre de vos composants Dialog et ne perdrez pas le focus. Dans un cas extrême, cela pourrait être le composant racine de votre application. Décorez ensuite la méthode de composant Dialogue souhaitée avec keydownScoped. À l'intérieur de cette méthode, examinez les accessoires pour vous assurer que le dialogue actuel est actif.

2) Activez par programme les raccourcis clavier de votre Dialog sur les lignes https://github.com/glortho/react-keydown/issues/28.

Espérons que ça aide!