reactjs - 如果解构 PreventDefault - 在 React 中使用 babel - 这是未定义的

Question

我刚刚遇到了最疯狂的错误。在我的 onKeyDown 中，我从 e 中解构了 preventDefault。但是，当我调用 preventDefault() 时，我会得到:

TypeError: this is undefined[Learn More]react-dom.js:13987:5

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

如果我不解构并仅使用e.preventDefaut()，它就可以工作。有人知道为什么吗？这是 babel 中的错误吗？

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。