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

• Z时代
• 2024-01-10
• 分类：问答

我正在制作一个应用程序，我想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;

回答：

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;

以上是 在React中按下（Ctrl + Enter）时调用函数 的全部内容， 来源链接： utcz.com/qa/423506.html