Question

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

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

在home组件中，我尝试在div元素中绑定onKeyPress，但它不起作用。我将它绑定在input元素上，它可以工作。

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

方法1：

要触发事件，需要选择div。为此，您需要将其集中在componentDidMount事件中。要做到这一点，你需要一个参考你的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);
}

Answer 2

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

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

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

2 个答案: