React.js zdarzenie onClick zwracające wszystkie wartości puste

Question

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

Zdarzenie, które zostało przekazane, zawiera cały obiekt kliknięcia, ale wartości są zerowe.

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

Wszelkie pomysły?

Answer 1

Reaktuj obiekty zdarzeń basenów ze względu na wydajność. Tak więc pobiera obiekt zdarzenia z puli, ustawia na nim właściwości, wywołuje program obsługi, a następnie ustawia wszystkie właściwości na wartość null, aby można je było ponownie wykorzystać.

Jest to głównie problem, ponieważ konsola leniwie ocenia obiekt, który się loguje. Możesz zrobić płytki klon obiektu zdarzenia, aby wykonać działanie console.log.

Dla celów debugowania,

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

Jeśli masz jQuery poręczne, po prostu zadzwoń:

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

Answer 3

Jeśli używasz etap-2 lub w górę z cech ES6 console.log({...e}) będzie działać tak samo, jak powyższa implementacja płytkiego klonu.

Answer 4

Programy obsługi zdarzeń będą przekazywane instancjami SyntheticEvent. The SyntheticEvent jest połączony. Oznacza to, że obiekt SyntheticEvent zostanie ponownie użyty, a wszystkie właściwości zostaną anulowane po wywołaniu wywołania zwrotnego zdarzenia.

Jeśli chcesz uzyskać dostęp do właściwości zdarzeń w sposób asynchroniczny, należy zadzwonić 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

Korzystanie console.log(Object.assign({}, e)); to elegancki sposób obsłużyć to - dobra alternatywa przedłużyć metoda jQuery.

Aby nauczyć człowieka łowienia ryb, dobrze byłoby dowiedzieć się, jak to działa. Oto bezpośredni link do tej sekcji ze specyfikacji ES2015: http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign