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

Question

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

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

在家庭组件中，我尝试将onKeyPress绑定到div元素中，但是它不起作用。我将其绑定到输入元素，它的工作。

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中加载页面组件时如何绑定键事件。因为，输入元素可能会散焦，并且此按键事件无法执行。

谢谢。

Answer 1

方法一：

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

第 1 步：获取 div 的引用

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

第 2 步：专注于负载

componentDidMount() {
  this.div.focus();
}

方法二：

收听整个文档上的事件

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

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

Answer 2

之所以不起作用，是因为该div元素需要tabIndex属性才能使其具有焦点并处理keyDown事件。

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