Ne réagit pas à un événement important

Je suis en train de mettre en œuvre certaines très clé de base, appuyez sur la détection et la je ne peux pas le faire fonctionner. J'ai un nu-composant qui doit ramasser sur les onKeyDown événement, mais rien n'est enregistré dans la console:

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleKeyDown(event) {
    console.log('handling a key press');
  }

  render() {
    return (
      <ChildComponent onKeyDown={this.handleKeyDown} />
    );
  }
}

React.render(<App />, document.getElementById('app'));

source d'informationauteur Simpleton

  1. 4

    Le problème est que ChildComponent n'est pas un composant, mais une composante de l'usine. Il sera remplacé par le résultat de rendu de l'élément créé à cette usine.

    Insérer le ChildComponent dans un div et joindre toute l'écouteur d'événement à la div, pas ChildComponent. Remplacer <div> avec <span> si vous avez besoin d'affichage.

    let {Component} = React;

class ChildComponent extends Component {
  render() {
    return ( <child-component>click me</child-component> );
  }
}

class App extends Component {
  handleClick(event) {
    console.log('handling a key press');
  }

  render() {
    return ( <div onClick={this.handleClick}><ChildComponent  /></div> );
  }
}

React.render(<App />, document.getElementById('app'));

    Le voir en action sur codepen

  2. 28

    Vous devez attribuer un tabIndex-attribut pour votre élément (l'élément d'habillage par exemple) pour qu'il puisse recevoir des appuis de touches. Passer ensuite le keyDown gestionnaire avec les accessoires: 

    import React from 'react';
import { render } from 'react-dom';

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div tabIndex="0" onKeyDown={this.props.handleKeyDown}>Fooo</div> 
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleKeyDown(event) {
    console.log('handling a key press');
  }

  render() {
    return (
      <ChildComponent handleKeyDown={() => this.handleKeyDown()} />
    );
  }
}

render(<App />, document.getElementById('app'));
  3. 7

    Les DOM veut l'élément à être concentré afin de recevoir l'événement de clavier. Si vous ne voulez pas de pirater l'élément avec tabIndex ou contentEditable pour obtenir le focus, vous pouvez utiliser natif DOM écouteurs d'événement sur windowet de définir un autre gestionnaire de chaque composant qui gère les événements de clavier.

    Juste être sûr d'enlever l'écouteur d'événement lorsque ce composant démonte afin que tous les composants ne sont pas de la manipulation de tous les temps:

      componentWillMount: function() {
    window.addEventListener('keydown', this.handleKeyDown);
  },

  componentWillUnmount: function() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },

    Aussi, il semble y avoir un mécanisme national de prévention qui offre des fonctionnalités similaires si c'est plus facile: https://www.npmjs.com/package/react-keydown

  4. 0

    Dans une application de mon équipe, nous sommes à l'aide de réagir raccourci clavier. Malheureusement, Réagir ne semble pas à l'appui de mixin avec ES6 syntaxe, mais si vous êtes cool avec certains babel, vous pouvez lui donner un essai.

    let App = React.createClass({
  mixins: [hotkey.Mixin('handleKeyDown')],

  componentDidMount() {
    hotkey.activate();
  },

  componentWillUnmount() {
    hotkey.disable();
  },

  handleKeyDown(event) {
    console.log('handling a key press');
  },

  render() {
    return (
      <ChildComponent />
    );
  }
});

React.render(<App />, document.getElementById('app'));