反应：调用函数与keydown（ctrl + enter）

Question

我正在做一个应用程序，我想启动一个功能（在这种情况下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; 

Answer 1

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

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

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

LIVE DEMO

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;