如何檢測Esc鍵在React中按下以及如何處理它

如何在reactjs上檢測Esc鍵？與jquery類似的東西如何檢測Esc鍵在React中按下以及如何處理它

$(document).keyup(function(e) { 
    if (e.keyCode == 27) { // escape key maps to keycode `27` 
     // <DO YOUR WORK HERE> 
    } 
});

一旦檢測到我想傳遞信息的組件。我有3個組件，其中最後一個活動組件需要對換碼鍵進行響應。

我在想一種註冊的當組件變得活躍

class Layout extends React.Component { 
    onActive(escFunction){ 
    this.escFunction = escFunction; 
    } 
    onEscPress(){ 
    if(_.isFunction(this.escFunction)){ 
     this.escFunction() 
    } 
    } 
    render(){ 
    return (
     <div class="root"> 
     <ActionPanel onActive={this.onActive.bind(this)}/> 
     <DataPanel onActive={this.onActive.bind(this)}/> 
     <ResultPanel onActive={this.onActive.bind(this)}/> 
     </div> 
    ) 
    } 
}

，並在所有的組件

class ActionPanel extends React.Component { 
    escFunction(){ 
    //Do whatever when esc is pressed 
    } 
    onActive(){ 
    this.props.onActive(this.escFunction.bind(this)); 
    } 
    render(){ 
    return ( 
     <input onKeyDown={this.onActive.bind(this)}/> 
    ) 
    } 
}

我相信這會工作，但我認爲這將是更像是一個回電話。有沒有更好的方法來處理這個問題？

來源

2016-05-25 Neo

您是否沒有助焊劑實現來存儲哪個是活動組件，而不是這樣做？ –

@BenHare：我還是很新的。我正在研究遷移到React的可行性。我沒有嘗試過助焊劑，所以你建議我應該考慮助焊劑的解決方案。 PS：如何檢測ESC按鍵？ – Neo

爲了澄清，您是否正在尋找文檔級別的按鍵檢測，如第一個代碼塊？或者這是一個輸入字段？你可以做任何一個，我只是不知道如何構建答案。這裏是一個快速的文檔級別，例如：http://codepen.io/anon/pen/ZOzaPW –

如果你正在尋找一個文件級重點事件處理，然後結合是最好的方式（如圖Brad Colthurst's codepen example）：

class ActionPanel extends React.Component { 
    constructor(props){ 
    super(props); 
    this.escFunction = this.escFunction.bind(this); 
    } 
    escFunction(event){ 
    if(event.keyCode === 27) { 
     //Do whatever when esc is pressed 
    } 
    } 
    componentDidMount(){ 
    document.addEventListener("keydown", this.escFunction, false); 
    } 
    componentWillUnmount(){ 
    document.removeEventListener("keydown", this.escFunction, false); 
    } 
    render(){ 
    return ( 
     <input/> 
    ) 
    } 
}

請注意，你應該確保刪除關鍵事件偵聽器卸載，以防止潛在的錯誤和內存泄漏。

來源

2017-09-08 20:17:18

「addEventListener」和「removeEventListener」中的第三個參數是什麼？ – jhuang

@jhuang https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener - 可以是情緒usecapture –

@jhuang它是useCapture參數，它指定是否捕獲事件[通常是不要像'focus'那樣冒泡（https://gomakethings.com/wtf-is-use-capture-in-vanilla-js-event-listeners/）。它與'keydown'沒有關係，但它[以前不是可選的]（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility），所以通常爲兼容性指定與IE <9。 –

你要監聽來自React SyntheticKeyBoardEventonKeyDown逃逸的keyCode（27）：

const EscapeListen = React.createClass({ 
    handleKeyDown: function(e) { 
    if (e.keyCode === 27) { 
     console.log('You pressed the escape key!') 
    } 
    }, 

    render: function() { 
    return (
     <input type='text' 
      onKeyDown={this.handleKeyDown} /> 
    ) 
    } 
})

Brad Colthurst's CodePen張貼在這個問題的意見是找到關鍵代碼爲其他鍵的幫助。在componentDidMount

來源

2017-01-22 23:21:16 pirt

我認爲值得添加React當被按下的鍵是ESC並且焦點在'內時，似乎不會觸發'onKeyPress'事件。在這種情況下，你可以使用'onKeyDown'和'onKeyUp'，它們都是按照正確的順序觸發的。 – Tom

如何檢測Esc鍵在React中按下以及如何處理它

回答

相關問題