如果destructure阻止默认 - 与babel反应 - 这是未定义的

Question

我刚才遇到了最疯狂的错误。在我的onKeyDown我解构了preventDefault e。但是，当我打电话给preventDefault()时，我会得到：

  

TypeError：这是未定义的[了解更多] react-dom.js：13987：5

我正在使用React v15.4.1，并在下面的屏幕截图中突出显示该行：

如果我不进行结构化，只使用e.preventDefaut()就行了。有人知道为什么吗？这是巴贝尔的一个错误吗？

const El = React.createClass({
  displayName: 'El',
  onKeyDown(e) {
    let { key, preventDefault } = e;
    preventDefault();
  },
  render() {
    return React.createElement('input', { onKeyDown:this.onKeyDown });
  }
});

Answer 1

preventDefault方法的实现取决于事件对象的其他属性，这些属性由this引用（即：this.defaultPrevented属性）。当您从e对其进行结构化时，将此函数从基础e对象中分离出来，这意味着您丢失了上下文this。需要使用正确的preventDefault对象上下文正确调用e方法。您可以通过event上下文调用来确认这一点，您可以使用Function.prototype.call：

onKeyDown(e) {
  let { key, preventDefault } = e;
  preventDefault.call(e);
},

我不会解构preventDefault。