React.js onClick事件返回所有空值如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (112)
module.exports = React.createClass({
  click: function(e){
    console.log(e)
  },
  render: function() {
    return div({className: "thing1", children:[
      div({className: "thing2", onClick: this.click})
    ]})
  }
})

传递给的事件包含单击对象的所有生成过程,但值为NULL。

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

有什么想法吗?

提问于
用户回答回答于

出于性能原因反应池事件对象。因此,它从池中取出一个事件对象,在其上设置属性,调用处理程序,然后将所有属性设置为null,以便可以重用它。

这主要只是一个问题,因为控制台懒洋洋地评估你登录的对象。你可以做一个事件对象的浅层克隆来使console.log工作。

为了调试目的,

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)
用户回答回答于

如果有jQuery,只需调用:

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

扫码关注云+社区

领取腾讯云代金券