Question

我正在构建一个伪造的文本区域，该区域支持突出显示和光标导航。为此，我需要支持 Alt + 左 / 右键之类的键盘快捷键。为此，我想防止发生默认的浏览器操作（在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

[UPDATE] 该事件只是不可见，但它已经存在，您可以使用古老而又出色的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

无法在React元素（div）上调用e.preventDefault

1 个答案: