Frage So erkennen Sie Esc-Taste Drücken Sie auf Reagieren und wie Sie damit umgehen


Wie erkenne ich den Esc-Druck auf reactjs? Die ähnliche Sache wie jQuery

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

Sobald erkannt, möchte ich die Informationen nach unten Komponenten weitergeben. Ich habe 3 Komponenten, von denen die letzte aktive Komponente auf die Escape-Taste drücken muss.

Ich dachte an eine Art Registrierung, wenn eine Komponente aktiv wird

class Layout extends React.Component {
  onActive(escFunction){
    this.escFunction = escFunction;
  }
  onEscPress(){
   if(_.isFunction(this.escFunction)){
      this.escFunction()
   }
  }
  render(){
    return (
      <div class="root">
        <ActionPanel onActive={this.onActive.bind(this)}/>
        <DataPanel onActive={this.onActive.bind(this)}/>
        <ResultPanel onActive={this.onActive.bind(this)}/>
      </div>
    )
  }
}

und auf allen Komponenten

class ActionPanel extends React.Component {
  escFunction(){
   //Do whatever when esc is pressed
  }
  onActive(){
    this.props.onActive(this.escFunction.bind(this));
  }
  render(){
    return (   
      <input onKeyDown={this.onActive.bind(this)}/>
    )
  }
}

Ich glaube, das wird funktionieren, aber ich denke, es wird mehr wie ein Rückruf sein. Gibt es einen besseren Weg, damit umzugehen?


37
2018-05-25 14:38


Ursprung


Antworten:


Wenn Sie nach einer Schlüsselereignisbehandlung auf Dokumentebene suchen und diese dann binden componentDidMount ist der beste Weg (wie gezeigt durch Brad Colthursts Codepenbeispiel):

class ActionPanel extends React.Component {
  constructor(props){
    super(props);
    this.escFunction = this.escFunction.bind(this);
  }
  escFunction(event){
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }
  componentDidMount(){
    document.addEventListener("keydown", this.escFunction, false);
  }
  componentWillUnmount(){
    document.removeEventListener("keydown", this.escFunction, false);
  }
  render(){
    return (   
      <input/>
    )
  }
}

Beachten Sie, dass Sie den Schlüsselereignislistener beim Aushängen entfernen müssen, um mögliche Fehler und Speicherverluste zu vermeiden.


49
2017-09-08 20:17



Du wirst nach Ausflügen lauschen wollen keyCode (27) von der Reagieren SyntheticKeyBoardEvent  onKeyDown:

const EscapeListen = React.createClass({
  handleKeyDown: function(e) {
    if (e.keyCode === 27) {
      console.log('You pressed the escape key!')
    }
  },

  render: function() {
    return (
      <input type='text'
             onKeyDown={this.handleKeyDown} />
    )
  }
})

Brad Colthursts CodePen In den Kommentaren der Frage ist es hilfreich, Schlüsselcodes für andere Schlüssel zu finden.


6
2018-01-22 23:21



Reagieren verwendet (SyntheticKeyboardEvent) [https://reactjs.org/docs/events.html#keyboard-events] natives Browserereignis umbrechen und dieses synthetische Ereignis bietet benanntes Schlüsselattribut,
was du so benutzen kannst:

handleOnKeyDown = (e) => {
  if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
    // select item
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    // go to top item
    e.preventDefault();
  } else if (e.key === 'ArrowDown') {
    // go to bottom item
    e.preventDefault();
  } else if (e.key === 'Escape') {
    // escape
    e.preventDefault();
  }
};

0
2018-04-04 19:00