54

I'm unable to get any of the React SyntheticKeyboardEvent handlers to register anything except null for the event properties.

I've isolated the component in a fiddle and am getting the same result as in my application. Can anyone see what I'm doing wrong?

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);
1
  • 3
    As explained in the accepted answer: you cannot directly log the event object. But you can use property spreading like console.log({...e}); when using ES2015 to introspect all available properties. Jan 11, 2016 at 10:56

4 Answers 4

62

BinaryMuse provided the answer on IRC. Turns out it's just a quirk; you can't read the properties directly from SyntheticKeyboardEvent -- you need to specify the properties from the handler:

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

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

5
  • 22
    This happens because React reuses the event objects for performance, so the properties are null by the time the console looks them up. If Chrome were to copy the object immediately when it gets logged, you wouldn't encounter this "problem". Mar 2, 2014 at 7:27
  • Bit late to the show, but suppose I wanted to capture this event, setState(someFunc, callbackWithEvent). Is there a way to clone this event so that the callbackWithEvent receives the synthetic event?
    – Clev3r
    Feb 19, 2015 at 20:44
  • 4
    If you want to see the state of the event at the time it was console.logged and not the time you look at it in the console, log it as JSON. This copies it by value instead of reference. console.log(JSON.stringify(event)) Apr 27, 2015 at 19:08
  • 1
    @CharlieMartin neat trick! This give a little more introspection to the problem.
    – Sam Texas
    May 21, 2015 at 12:35
  • 1
    Hm. That doesn't work for me. The handlers are just not called. What could be the problem? Oct 7, 2015 at 12:32
25

console.log() is aynchronous and by the time it access the event React already garbage collected it (it reuses the event for performance reasons).

For debugging purposes, the simplest thing to do is to tell React to not discard that event

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

I can't find an API documentation, the method is at least documented in the sources https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155

1
  • I was trying to get the 'X' value for a touch event but kept getting null even though regular mouse clicks were being captured properly. This solved my problem. Thank you!
    – HaulinOats
    May 8, 2017 at 17:45
2

As Riccardo Galli points out correctly, the log object is already garbage collected at the time you access it in the console.

The solution I use is to just log a clone of the object, so it won't be garbage collected. Cloning can be done in a lot of ways, but since I use lodash, I log like this :

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

You can also extract the underlying (original) browser event from the Synthetic*Event wrapper via the nativeEvent property. E.g.,

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

(Just as with @Riccardo's note about e.persist(), it's unclear how you're supposed to know this without reading the React.js source code.)

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.