Событие 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})
    ]})
  }
})

Событие, которое передано, содержит все создание объекта клика, но значения равны нулю.

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

Любые идеи?

Ответ 1

Реагируйте пулы объектов событий по соображениям производительности. Таким образом, он берет объект события из пула, устанавливает для него свойства, вызывает ваш обработчик, а затем устанавливает все свойства в 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)

Ответ 2

Обработчикам событий будут переданы экземпляры 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>
    );
}

Ответ 3

Если у вас есть jQuery, просто вызовите:

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

Ответ 4

Если вы используете этап 2 или выше ES6, функции console.log({...e}) будут работать так же, как и реализация мелкого клонирования выше.

Ответ 5

Использование console.log(Object.assign({}, e)); - это элегантный способ справиться с этим - хороший альтернативный метод расширения jQuery.

В интересах обучения человека рыбе, было бы хорошо узнать, как это работает. Здесь прямая ссылка на этот раздел из спецификаций ES2015: http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign