React hook如何检测组合键cmd+enter

Question

我想在文本区域内检测到组合键 cmd+enter 时运行一个函数。

并且需要兼容react hook。

我需要一些关于如何做到这一点的建议。

useEffect(() => {
        const listener = (event) => {
            console.log('a', event.which)
            if (event.which === 13 && event.which === 91) {
                console.log('Enter key was pressed. Run your function.')
                event.preventDefault()
                // callMyFunction();
            }
        }
        document.addEventListener('keydown', listener)
        return () => {
            document.removeEventListener('keydown', listener)
        }
    }, [])

这是我的代码，它不识别组合。

Answer 1

您可以使用它Event.metaKey来聆听CommandMac 中的按键点击声。

const { useEffect } = React;

const App = () => {
  const onKeyDown = (e) => {
    if(e.metaKey && e.which === 13) {
      console.log("command + enter clicked");
    }
  }
  
  useEffect(() => {
    document.getElementById("test").addEventListener('keydown', onKeyDown);
    
    return () => {
        document.getElementById("test").removeEventListener('keydown', onKeyDown);
    }
  });
  
  return <textarea id="test"/>
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>

或者您可以简单地执行如下所示的操作

const { useEffect } = React;

const App = () => {
  const onKeyDown = (e) => {
    if(e.metaKey && e.which === 13) {
      console.log("command + enter clicked");
    }
  }
  
  return <textarea onKeyDown={onKeyDown}/>
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>