Comment détecter la touche Echap dans React et comment la gérer

Comment détecter la pression de la touche Echap sur reactjs? La chose similaire à jquery

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

Une fois détecté, je veux transmettre les composants d'informations. J'ai 3 composants dont le dernier composant actif doit réagir à la pression de la touche d'échappement.

Je pensais à une sorte d'enregistrement lorsqu'un composant devient actif

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>
    )
  }
}

et sur tous les composants

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)}/>
    )
  }
}

Je crois que cela fonctionnera, mais je pense que ce sera plus comme un rappel. Y a-t-il une meilleure façon de gérer cela?

Si vous recherchez une gestion des événements de clé au niveau du document, componentDidMountla meilleure méthode est de la lier pendant (comme le montre l'exemple codepen de Brad Colthurst ):

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/>
    )
  }
}

Notez que vous devez vous assurer de supprimer l'écouteur d'événements de clé lors du démontage pour éviter les erreurs potentielles et les fuites de mémoire.

EDIT: Si vous utilisez des hooks, vous pouvez utiliser cette useEffectstructure pour produire un effet similaire:

const ActionPanel = (props) => {
  const escFunction = useCallback((event) => {
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }, []);

  useEffect(() => {
    document.addEventListener("keydown", escFunction, false);

    return () => {
      document.removeEventListener("keydown", escFunction, false);
    };
  }, []);

  return (   
    <input />
  )
};

Vous voudrez écouter les évasions keyCode(27) du ReactSyntheticKeyBoardEvent 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} />
    )
  }
})

Le CodePen de Brad Colthurst publié dans les commentaires de la question est utile pour trouver des codes clés pour d'autres clés.

Une autre façon d'accomplir cela dans un composant fonctionnel est d'utiliser useEffectet useFunction, comme ceci:

import React, { useEffect } from 'react';

const App = () => {


  useEffect(() => {
    const handleEsc = (event) => {
       if (event.keyCode === 27) {
        console.log('Close')
      }
    };
    window.addEventListener('keydown', handleEsc);

    return () => {
      window.removeEventListener('keydown', handleEsc);
    };
  }, []);

  return(<p>Press ESC to console log "Close"</p>);
}

Au lieu de console.log, vous pouvez utiliser useStatepour déclencher quelque chose.

React utilise SyntheticKeyboardEvent pour encapsuler l'événement de navigateur natif et cet événement Synthetic fournit un attribut de clé nommé ,
que vous pouvez utiliser comme ceci:

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();
  }
};

Pour une solution de crochet React réutilisable

import React, { useEffect } from 'react';

const useEscape = (onEscape) => {
    useEffect(() => {
        const handleEsc = (event) => {
            if (event.keyCode === 27) 
                onEscape();
        };
        window.addEventListener('keydown', handleEsc);

        return () => {
            window.removeEventListener('keydown', handleEsc);
        };
    }, []);
}

export default useEscape

Usage:

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false))