React.js onClick event returning all null values

Question

module.exports = React.createClass({   click: function(e){     console.log(e)   },   render: function() {     return div({className: "thing1", children:[       div({className: "thing2", onClick: this.click})     ]})   } }) 

The event that is passed to contains all the making of a click object but the values are null.

Object { dispatchConfig: null, dispatchMarker: null, nativeEvent: null, type: null, target: null, currentTarget: null, eventPhase: null, bubbles: null, cancelable: null, timeStamp: null, 22 more… } 

Any ideas?

Answer 1

React pools event objects for performance reasons. So it takes an event object from the pool, sets properties on it, calls your handler, and then sets all of the properties to null so it can be reused.

This is mostly only a problem because the console lazily evaluates the object you log. You could do a shallow clone of the event object to make console.log work.

For debugging purposes,

console.shallowCloneLog = function(){   var typeString = Function.prototype.call.bind(Object.prototype.toString)   console.log.apply(console, Array.prototype.map.call(arguments, function(x){     switch (typeString(x).slice(8, -1)) {       case 'Number': case 'String': case 'Undefined': case 'Null': case 'Boolean': return x;       case 'Array': return x.slice();       default:          var out = Object.create(Object.getPrototypeOf(x));         out.constructor = x.constructor;         for (var key in x) {           out[key] = x[key];         }         Object.defineProperty(out, 'constructor', {value: x.constructor});         return out;     }   })); } 

console.shallowCloneLog(e)