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

Question

我正在构建一个支持突出显示和光标导航的假文本区域。作为其中的一部分，我需要支持键盘快捷键，例如 Alt + left/right 键。为了做到这一点，我想防止默认浏览器操作发生(在 Windows 上的 Firefox Alt + left/right 向前导航或返回一页)。

问题是传递到我的 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;

Answer 1

[更新] 该事件只是不可见，但它就在那里，您可以通过一个古老而出色的 console.log(e.preventDefault) 找到它!

[旧答案]使用来自 nativeEvent 的事件:

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

引用:https://reactjs.org/docs/events.html#overview