fangen Keydown-Ereignisse in inneren Komponenten mit react-keydown

Question

Ich benutze React-Keydown-Bibliothek zum Hinzufügen von Tastenkombinationen zu meiner Anwendung, kann aber nicht in innere Dialoge Komponenten arbeiten. Die Dialoge sind nicht immer sichtbar, aber ich erwarte, dass die Tasten funktionieren, wenn sie sichtbar sind. ich bin immer zu event_handlers.js._onKeyDown (event) Methode, aber mit fehlendem Wert: fn = undefined, während fn sollte die eingerichtete Funktion enthalten.

Meine Komponenten wie folgt aussieht:

<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

Basierend auf Ihrer Beschreibung in den Kommentaren, wird das Problem Seien Sie, dass Ihre Dialog-Komponenten mounten und dann den Fokus verlieren, so dass alle Tastenbelegungen in ihnen den Tastendruck nicht erhalten s. Sie haben einige Optionen:

1) Erweitern Sie den Umfang der Tastenkürzel, indem Sie eine Komponente dekorieren, die ein Vorfahre Ihrer Dialog-Komponenten ist und den Fokus nicht verliert. Im Extremfall könnte dies die Hauptkomponente Ihrer App sein. Dann dekorieren Sie die gewünschte Dialog-Komponentenmethode mit keydownScoped. Innerhalb dieser Methode untersuchen Sie die Requisiten, um sicherzustellen, dass der aktuelle Dialog der aktive ist.

2) Programmatisch aktivieren Sie Ihre Dialog Tastenbelegung in diesem Fall https://github.com/glortho/react-keydown/issues/28.

Hoffe, dass hilft!