React: Keyboard Event Handlers All 'Null'

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/


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


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)));
    }