web-dev-qa-db-ja.com

reactjsでドキュメントのキープレスを聞く

アクティブな反応を閉じるためにバインドしたいbootstrapポップオーバーescapeを押します。ここにコードがあります

_handleEscKey:function(event){
         console.log(event);
        if(event.keyCode == 27){
          this.state.activePopover.hide();
        }
   },

  componentWillMount:function(){
     BannerDataStore.addChangeListener(this._onchange);
     document.addEventListener("click", this._handleDocumentClick, false);
     document.addEventListener("keyPress", this._handleEscKey, false);
   },


   componentWillUnmount: function() {
     BannerDataStore.removeChangeListener(this._onchange);
      document.removeEventListener("click", this._handleDocumentClick, false);
      document.removeEventListener("keyPress", this._handleEscKey, false);
   },

しかし、キーを押してもコンソールに何も記録されません。私もそれをウィンドウでさまざまなケースで聞いてみました。「キープレス」、「キーアップ」など、私は何か間違ったことをしているようです。

reactjsreact-jsxreact-bootstrap
64
alwaysLearn

keydownではなく、keypressを使用する必要があります。

Keypressは通常、ドキュメントに従って文字出力を生成するキーにのみ使用されます

Keypress

Keypressイベントは、キーが押されたときに発生し、そのキーは通常文字値を生成します

Keydown

キーが押されると、keydownイベントが発生します。

49
Dhiraj

私自身も同様の問題を抱えていました。コードを使用して修正を説明します。

// for other devs who might not know keyCodes
var ESCAPE_KEY = 27;

_handleKeyDown = (event) => {
    switch( event.keyCode ) {
        case ESCAPE_KEY:
            this.state.activePopover.hide();
            break;
        default: 
            break;
    }
},

// componentWillMount deprecated in React 16.3
componentDidMount(){
    BannerDataStore.addChangeListener(this._onchange);
    document.addEventListener("click", this._handleDocumentClick, false);
    document.addEventListener("keydown", this._handleKeyDown);
},


componentWillUnmount() {
    BannerDataStore.removeChangeListener(this._onchange);
    document.removeEventListener("click", this._handleDocumentClick, false);
    document.removeEventListener("keydown", this._handleKeyDown);
},

CreateClassの方法を使用しているため、定義された各メソッドでthisが暗黙的に指定されているため、特定のメソッドにバインドする必要はありません。

Reactコンポーネント作成のcreateClassメソッドを使用して、動作するjsfiddleがあります here。

40
Chris Sullivan

タブ可能なdivについても同じ要件がありました。

私の次のコードは、items.map（（item）=> ...

  <div
    tabindex="0"
    onClick={()=> update(item.id)}
    onKeyDown={()=> update(item.id)}
   >
      {renderItem(item)}
  </div>

これは私のために働いた！

0
Jt oso