在React的按键按下(Ctrl + Enter)上调用函数 [英] Call function on keydown (Ctrl + Enter) in React

问题描述

我正在制作一个应用，我想在用户按下 Ctrl + Enter showMessage )>.我将如何做到这一点，最好不要使用jQuery?

I'm making an app and I want to fire a function (in this case the showMessage) when the user presses Ctrl + Enter. How would I do this, preferably without 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;

推荐答案

1. 添加事件侦听器: document.addEventListener('keydown'，this.keydownHandler)

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

then in handler check e.keyCode===13 && e.ctrlKey

不要忘记删除 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;

这篇关于在React的按键按下(Ctrl + Enter)上调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！