React：keydown（ctrl + enter）で関数を呼び出す

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

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;