web-dev-qa-db-fra.com

React: les gestionnaires d'événements clavier sont tous «nuls»

Je ne parviens pas à obtenir l'un des gestionnaires React SyntheticKeyboardEvent pour enregistrer quoi que ce soit sauf null pour les propriétés de l'événement.

J'ai isolé le composant dans un violon et j'obtiens le même résultat que dans mon application. Quelqu'un peut-il voir ce que je fais mal?

http://jsfiddle.net/kb3gN/1405/

var Hello = React.createClass({
    render: function() {
      return (
      <div>
        <p contentEditable="true"
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress}>Foobar</p>
        <textarea
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress}>
        </textarea>
        <div>
          <input type="text" name="foo" 
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress} />
        </div>
      </div>
      );
    },

    handleKeyDown: function(e) {
      console.log(e);
    },

    handleKeyUp: function(e) {
     console.log(e);
    },

    handleKeyPress: function(e) {
     console.log(e); 
    }
});

React.renderComponent(<Hello />, document.body);
javascriptreactjsreact-jsx
54
cantera

BinaryMuse a fourni la réponse sur IRC. Il s'avère que ce n'est qu'une bizarrerie; vous ne pouvez pas lire les propriétés directement à partir de SyntheticKeyboardEvent - vous devez spécifier les propriétés à partir du gestionnaire:

handleKeyUp: function(e) {
 console.log(e.type, e.which, e.timeStamp);
},

http://jsfiddle.net/BinaryMuse/B98Ar/

62
cantera

console.log () est aynchrone et au moment où il accède à l'événement React l'a déjà récupéré (il réutilise l'événement pour des raisons de performances).

À des fins de débogage, la chose la plus simple à faire est de dire à React de ne pas ignorer cet événement

e.persist() // NOTE: don't forget to remove it post debug
console.log(e)

Je ne trouve pas de documentation API, la méthode est au moins documentée dans les sources https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent. js # L155

24
Riccardo Galli

Comme Riccardo Galli le fait remarquer correctement, l'objet journal est déjà récupéré au moment où vous y accédez dans la console.

La solution que j'utilise est de simplement enregistrer un clone de l'objet, afin qu'il ne soit pas récupéré. Le clonage peut se faire de différentes manières, mais comme j'utilise lodash, je me connecte comme ceci:

  handleKeyDown: function(e) {
      console.log(_.cloneDeep(e)));
    }
2
Peter

Vous pouvez également extraire l'événement de navigateur sous-jacent (d'origine) du wrapper Synthetic*Event Via la propriété nativeEvent. Par exemple.,

handleKeyDown: function(e) {
  console.log('keyDown:event', e.nativeEvent);
},

(Tout comme avec la note de @ Riccardo sur e.persist(), on ne sait pas comment vous êtes censé le savoir sans lire le code source de React.js.)

1
chbrown