反應：調用函數與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;