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

Question

如何檢測 reactjs 上的 Esc 按鍵？ 類似於 jquery

$(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)}/>
    )
  }
}

我相信這會奏效，但我認為它更像是回調。 有沒有更好的方法來處理這個問題？

Answer 1

如果您正在尋找文檔級的鍵事件處理，那么在componentDidMount期間綁定它是最好的方法（如Brad Colthurst的codepen示例所示 ）：

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/>
    )
  }
}

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

編輯：如果您正在使用掛鈎，則可以使用此useEffect結構產生類似的效果：

const ActionPanel = (props) => {
  const escFunction = useCallback((event) => {
    if(event.keyCode === 27) {
      //Do whatever when esc is pressed
    }
  }, []);

  useEffect(() => {
    document.addEventListener("keydown", escFunction, false);

    return () => {
      document.removeEventListener("keydown", escFunction, false);
    };
  }, []);

  return (   
    <input />
  )
};

Answer 2

對於可重用的 React 鈎子解決方案

import React, { useEffect } from 'react';

const useEscape = (onEscape) => {
    useEffect(() => {
        const handleEsc = (event) => {
            if (event.keyCode === 27) 
                onEscape();
        };
        window.addEventListener('keydown', handleEsc);

        return () => {
            window.removeEventListener('keydown', handleEsc);
        };
    }, []);
}

export default useEscape

Answer 3

您將需要從React SyntheticKeyBoardEvent onKeyDown監聽轉義的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的CodePen有助於查找其他按鍵的按鍵代碼。

Answer 4

React使用SyntheticKeyboardEvent包裝本地瀏覽器事件，並且此Synthetic事件提供了命名的key屬性 ，
您可以這樣使用：

handleOnKeyDown = (e) => {
  if (['Enter', 'ArrowRight', 'Tab'].includes(e.key)) {
    // select item
    e.preventDefault();
  } else if (e.key === 'ArrowUp') {
    // go to top item
    e.preventDefault();
  } else if (e.key === 'ArrowDown') {
    // go to bottom item
    e.preventDefault();
  } else if (e.key === 'Escape') {
    // escape
    e.preventDefault();
  }
};

Answer 5

在功能組件中完成此操作的另一種方法是使用useEffect和useFunction ，如下所示：

import React, { useEffect } from 'react';

const App = () => {


  useEffect(() => {
    const handleEsc = (event) => {
       if (event.keyCode === 27) {
        console.log('Close')
      }
    };
    window.addEventListener('keydown', handleEsc);

    return () => {
      window.removeEventListener('keydown', handleEsc);
    };
  }, []);

  return(<p>Press ESC to console log "Close"</p>);
}

您可以使用useState來觸發某些操作，而不是console.log。

Answer 6

function handleEsc(event) {
    if (event.keyCode === 27) {
      close();
    }
  }

  useEffect(() => {
    window.addEventListener("keydown", handleEsc);
    return () => {
      window.removeEventListener("keydown", handleEsc);
    };
  }, []);

Answer 7

如果您想直接在您的組件中而不是鈎子中使其工作，或者如果您像我一樣在不返回 <Component 的鈎子中使用它，這對我有用。

useEffect(()=>{
    document.addEventListener('keydown', (e) => {
      e.key === 'Escape' && setOpenState(false)
    })
    return () => {
      document.removeEventListener('keydown', (e) => e)
    }
  },[openState])

Answer 8

反應鈎子

const [add, setAdd] = useState(false);
useEffect(()=>{
        document.addEventListener("keydown", keydownFunction, false);
        return  () => { document.removeEventListener("keydown", keydownFunction, false); };
    }, []);
const keydownFunction =(event)=>{
        if (event.key === "Escape") {  setAdd(false); }
        if (event.key === "+") { setAdd(true); }) }
}