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

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

传递给的事件包含所有制作的点击对象，但值为空。React.js onClick事件返回所有空值

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

任何想法？

来源

2014-10-11 boom

出于性能原因反应池事件对象。因此，它从池中取出一个事件对象，在其上设置属性，调用您的处理程序，然后将所有属性设置为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)

来源

2014-10-11 19:38:11 FakeRainBrigand

谢谢，理解，很好的答案。 – boom 2014-10-11 19:54:41

为了简单的调试目的，在记录事件之前调用事件上的persist（）可能是一个很好的解决方法。 – 2014-10-12 02:41:49

如果您有jQuery的方便，只需拨打：

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

来源

2015-05-21 14:07:48

一个可能更有可能有Object.assign： 'console.log（Object.assign（{}，ev））;' – 2016-03-22 14:03:17

如果您在使用阶段-2或向上的ES6功能console.log({...e})将与上面的浅层克隆实现相同。

来源

2016-08-28 17:30:17

你能解释一下代码的工作原理吗？ – 2018-01-30 08:30:35

事件处理程序将传递SyntheticEvent的实例。 SyntheticEvent被合并。这意味着SyntheticEvent对象将被重用，并且在事件回调被调用之后，所有属性都将被取消。

如果你想在一个异步的方式来访问事件属性，你应该叫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> 
    ); 
}

来源

2016-09-26 16:58:35

使用console.log(Object.assign({}, e));是处理这个优雅的方式 - 一个很好的替代jQuery的扩展方法。

为了教导一个人钓鱼，很高兴知道它是如何工作的。这里是从ES2015规格的该部分的直接链接：http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign

来源

2016-11-13 09:32:38

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

回答

相关问题