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 recherchez un traitement des événements clés au niveau du document, vous pouvez le lier au cours de l'opération suivante componentDidMount est le meilleur moyen (comme le montre L'exemple de codepen de Brad Colthurst ) :

class ActionPanel extends React.Component {
  constructor(props){
    super(props);
    this.escFunction = this.escFunction.bind(this);
  }
  escFunction(event){
    if (event.key === "Escape") {
      //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 la clé lors du démontage pour éviter les erreurs potentielles et les fuites de mémoire.

EDIT : Si vous utilisez des crochets, vous pouvez utiliser ceci useEffect pour produire un effet similaire :

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

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

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

  return (   
    <input />
  )
};

Answer 2

Vous voudrez écouter l'évasion. keyCode (27) de la React 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} />
    )
  }
})

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

Answer 3

Une autre façon d'accomplir ceci dans un composant fonctionnel, est d'utiliser useEffect 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 useState pour déclencher quelque chose.

Answer 4

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

Uso:

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

Answer 5

React utilise SyntheticKeyboardEvent pour envelopper l'évènement natif du navigateur et cet évènement synthétique fournit attribut 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();
  }
};