在React中按下（Ctrl + Enter）时调用函数

小编典典

在React中按下（Ctrl + Enter）时调用函数

reactjs

我正在制作一个应用程序，我想showMessage在用户按下Ctrl+
时触发一个功能（在本例中为）Enter。我将如何做到这一点，最好不要使用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;

阅读 779

2020-07-22

共1个答案

小编典典

添加事件监听器： document.addEventListener('keydown',this.keydownHandler)
然后在处理程序中检查 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;

2020-07-22