如何在 ReactJS 中处理 div 上的 onKeyDown 事件

Posted 2023-02-21

【中文标题】如何在 ReactJS 中处理 div 上的 onKeyDown 事件

【英文标题】：How to handle onKeyDown event on div in ReactJS

【发布时间】：2018-04-19 16:59:53

【问题描述】：

我正在尝试在加载页面组件时处理关键事件。 首先，我有一个路由器：

<Router>
    <Route exact path="/" component=Home />
</Router>

在 home 组件中，我尝试在 div 元素中绑定 onKeyPress，但它不起作用。我将它绑定在输入元素上，它起作用了。

return (
        <div onKeyDown=this.__handleKeyDown className="container" style= backgroundImage: `url($this.state.backgroundbanner)` >
            <input
                className="hidden"
                onKeyDown=this.__handleKeyDown
                ref=(input) =>  this.dummyInput = input; 
                />
            <div className="container-shadow">
                <h1 className="main-title">this.state.title</h1>
                <h3 className="main-description">this.state.description</h3>
                <ListMovie cursor= cursor  />
            </div>
        </div>
    )

如何在 div 元素上绑定 onKeyDown 事件或在 Route 中加载页面组件时如何绑定 key 事件。因为，输入元素可能是失焦的，这个关键事件不能被执行。

谢谢。

【参考方案1】：

它不起作用的原因是div 元素需要tabIndex 属性才能获得焦点并处理keyDown 事件。

<div tabIndex="1" onKeyDown=this.__handleKeyDown></div>

【讨论】：

感谢@Daniel Andrei，简单的解决方案:)。成功了。

您可能希望设置为 -1，因为您正在以编程方式对其进行操作。 webaim.org/techniques/keyboard/tabindex

【参考方案2】：

方法一：

要触发事件，需要选择您的 div。为此，您需要将其集中在 componentDidMount 事件中。要做到这一点，你需要一个 ref 到你的 div。

第 1 步：获取 div 的引用

<div onKeyDown=this.__handleKeyDown ref=(c) => this.div = c;>

第 2 步：专注于负载

componentDidMount() 
  this.div.focus();

方法2：

监听整个文档的事件

componentDidMount() 
    document.addEventListener('keydown', this.onKeyDown);


componentWillUnmount() 
    document.removeEventListener('keydown', this.onKeyDown);

【讨论】：

为我this.ref.current.focus()