React.js onClick事件返回所有空值

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)

Answer 2

Event handlers will be passed instances of SyntheticEvent . The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked.

If you want to access the event properties in an asynchronous way, you should call event.persist()

func(e){
    e.persist();
    console.log(e);// all the properties are retained
}

render () {
    return(
      <div onMouseOver={this.func}>
      //rest of the logic
      </div>
    );
}

Answer 3

如果你有方便的jQuery，只需调用：

console.log('e: ', $.extend({}, e));

Answer 4

如果您正在使用阶段2或更高版本的ES6功能，则console.log({...e})工作方式与上面的浅克隆实现相同。

Answer 5

Using console.log(Object.assign({}, e)); is an elegant way to handle this--a good alternative jQuery's extend method.

In the interest of teaching a man to fish, it'd be good to learn how this works. Here's the direct link to that section from ES2015 specs: http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign