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}) 
    ]}) 
    } 
}) 

傳遞給的事件包含所有制作的點擊對象，但值爲空。

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

任何想法？

Answer 1

出於性能原因反應池事件對象。因此，它從池中取出一個事件對象，在其上設置屬性，調用您的處理程序，然後將所有屬性設置爲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) 

Answer 2

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

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

Answer 3

如果您在使用階段-2或向上的ES6功能console.log({...e})將與上面的淺層克隆實現相同。

Answer 4

事件處理程序將傳遞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> 
    ); 
} 

Answer 5

使用console.log(Object.assign({}, e));是處理這個優雅的方式 - 一個很好的替代jQuery的擴展方法。

爲了教導一個人釣魚，很高興知道它是如何工作的。這裏是從ES2015規格的該部分的直接鏈接：http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign