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

【问题标题】：React.js onClick event returning all null valuesReact.js onClick 事件返回所有空值
【发布时间】：2014-12-06 17:15:31
【问题描述】：

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… }

有什么想法吗？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

为了简单的调试目的，在记录之前对事件调用 persist() 可能是一个很好的解决方法。

【解决方案2】：

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

如果你想以异步方式访问事件属性，你应该调用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】：

如果您使用的是第 2 阶段或更高版本的 ES6 功能，console.log({...e}) 的工作方式与上述浅层克隆实现相同。

【讨论】：

【解决方案4】：

如果你有 jQuery，只需调用：

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

【讨论】：

一个可能更有可能有 Object.assign:console.log(Object.assign({}, ev));

【解决方案5】：

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

为了教人钓鱼，最好了解一下这是如何工作的。这是 ES2015 规范中该部分的直接链接：http://www.ecma-international.org/ecma-262/6.0/#sec-object.assign

【讨论】：