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;

Answer 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;

在React中的keydown上调用函数（Ctrl + Enter）

1 个答案: