在React中按下Ctrl + Enter键调用函数

Question

我正在制作一个应用程序，我希望在用户按下 Ctrl + Enter 时触发一个函数（在这种情况下为 showMessage）。怎样做才能实现这一点，最好不使用jQuery？

import React from "react"

const App = React.createClass({
  showMessage () {
    console.log('hit');
  },
  render () {
    return (
      <div>
        <button onClick={this.showMessage}>Hit</button>
      </div>
    );
  }
});


module.exports = App;

- WillKre

---

在 componentDidMount 中为文档注册 onkeypress 处理程序。 - Igorsvee

Answer 1

1. 添加事件监听器：document.addEventListener('keydown',this.keydownHandler)

2. 然后在处理程序中检查 e.keyCode===13 && e.ctrlKey

3. 不要忘记在componentWillUnmount中删除事件监听器

const App = React.createClass({
  showMessage () {
    alert('SOME MESSAGE');
  },
  keydownHandler(e){
    if(e.keyCode===13 && e.ctrlKey) this.showMessage()
  },
  componentDidMount(){
    document.addEventListener('keydown',this.keydownHandler);
  },
  componentWillUnmount(){
    document.removeEventListener('keydown',this.keydownHandler);
  },
  render () {
    return (
      <div>
        <h1>Press Ctrl+Enter</h1>
        <button onClick={this.showMessage}>Hit</button>
      </div>`
    );
  }
});
export default App;

- Kokovin Vladislav

---

太完美了。我已经将它添加到我的项目中，它运作得非常好。谢谢！ - WillKre

keyCode现已弃用，请使用e.key === 'Enter' && e.ctrlKey。 - Aaron Ford

Answer 2

也可以使用功能组件来完成

export function App() {
  const showMessage = () => {
    alert('SOME MESSAGE');
  };
  const keydownHandler = (e) => {
    if(e.key === 'Enter' && e.ctrlKey) showMessage()
  };
  React.useEffect(() => {
    document.addEventListener('keydown', keydownHandler);
    return () => {
      document.removeEventListener('keydown', keydownHandler);
    }
  }, []);

  return (
    <div>
      <h1>Press Ctrl+Enter</h1>
      <button onClick={showMessage}>Hit</button>
    </div>
  );
}

- Ben Winding