javascript - 无法在React元素(div)上调用e.preventDefault

我正在构建一个伪造的文本区域，该区域支持突出显示和光标导航。作为其中的一部分，我需要支持键盘快捷键，例如Alt +左​​/右键。为此，我想防止发生默认的浏览器操作（在Windows的Firefox中，Alt +左​​/右导航向前或向后导航页面）。

问题在于传递给我的onKeyDownHandler函数的事件对象不包含preventDefault方法。如何获得此方法？

这是我的代码的简化版本：

import React from 'react';

class FakeTextArea extends React.Component {
  constructor(props) {
    super(props);

    this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
  }

  onKeyDownHandler(e) {
    if (e.key === 'arrowleft' && e.altKey) {
      // e.preventDefault() doesn't exist
      console.log('no prevent default?');
    }
  }

  render() {
    return (
      <div
        tabIndex="0"
        onKeyDown={this.onKeyDownHandler}
      >
      Here is some random text that I want to have in here
      </div>
    );
  }
}

export default FakeTextArea;

最佳答案

[更新]该事件只是不可见，但它在那里，您可以使用古老而又出色的console.log（e.preventDefault）找到它！

[OLD ANSWER]使用来自nativeEvent的事件：

onKeyDownHandler(e) {
    if (e.key === 'arrowleft' && e.altKey) {
      e.nativeEvent.preventDefault()
      console.log('no prevent default?');
    }
  }

参考：https://reactjs.org/docs/events.html#overview