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

Question

Comment détecter une pression sur la touche Esc dans 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 l'information aux composants. J'ai 3 composants dont le dernier composant actif doit réagir à la pression de la touche Echap.

Je pensais à une sorte d'enregistrement de l'activation d'un composant.

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 plutôt un rappel. Y a-t-il une meilleure façon de gérer cela ?

Answer 1

Si vous voulez que cela fonctionne directement dans votre composant au lieu d'un crochet, ou si comme moi vous l'utilisez dans un crochet qui NE renvoie PAS un <Composant>, cela a fonctionné pour moi.

useEffect(()=>{
    document.addEventListener('keydown', (e) => {
      e.key === 'Escape' && setOpenState(false)
    })
    return () => {
      document.removeEventListener('keydown', (e) => e)
    }
  },[openState])

Answer 2

function handleEsc(event) {
    if (event.keyCode === 27) {
      close();
    }
  }

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