module.exports = React.createClass({
click: function(e){
console.log(e)
},
render: function() {
return div({className: "thing1", children:[
div({className: "thing2", onClick: this.click})
]})
}
})
传递给的事件包含所有点击对象,但值为空。
Object { dispatchConfig: null, dispatchMarker: null, nativeEvent: null, type: null, target: null, currentTarget: null, eventPhase: null, bubbles: null, cancelable: null, timeStamp: null, 22 more… }
有什么想法吗?
答案 0 :(得分:25)
出于性能原因,React pool事件对象。因此它从池中获取一个事件对象,在其上设置属性,调用您的处理程序,然后将所有属性设置为null,以便可以重用它。
这主要是一个问题,因为console
懒惰地评估您记录的对象。您可以对事件对象执行浅层克隆以使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)
答案 1 :(得分:10)
事件处理程序将传递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>
);
}
答案 2 :(得分:3)
如果您有方便的jQuery,只需致电:
console.log('e: ', $.extend({}, e));
答案 3 :(得分:3)
如果您正在使用阶段2或更高版本的ES6功能console.log({...e})
将与上面的浅层克隆实现相同。
答案 4 :(得分:2)
使用console.log(Object.assign({}, e));
是一种处理这个问题的优雅方法 - 一个很好的替代jQuery的扩展方法。
为了教导一个人捕鱼,了解它是如何工作的,这是很好的。以下是ES2015规范中该部分的直接链接:http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign