ReactJSのdivのonKeyDownイベントを処理する方法

Question

ページコンポーネントを読み込むときにキーイベントを処理しようとしています。ホームコンポーネントで

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

が、私は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

なぜ機能しないのかという理由は、div要素にフォーカスを合わせてkeyDownイベントを処理するためにtabIndex属性が必要であるためです。

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

Answer 2

アプローチ1：トリガするイベントのために

、あなたのdivが選択する必要があります。これを行うには、componentDidMountイベントにフォーカスを当てる必要があります。そして、これを行うにはあなたのdivへの参照が必要です。

ステップ1：文書全体のイベントに耳を傾ける

：負荷にそれを集中

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

アプローチ2：あなたのdiv

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

ステップ2への参照を取得します

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

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