2016-09-20 156 views
0

我在下面有一個ReactJS組件。即使我的組件沒有對焦,我也想聽一下按鍵。它將始終呈現,但它不是網頁上唯一的組件。當我按下SHIFT鍵時,事件監聽器將調用一個函數。該組件不是我網頁上的最頂層組件;它有一個父母。如何確保事件偵聽器始終在ReactJS子組件內調用?

Component extends React.Component { 

    componentWillMount(): void { 
     document.addListener('keyDown', this._handleKeyDown); 
    } 

    componentWillUnmount(): void { 
     document.removeListender('keyDown', this._handleKeyDown); 
    } 

} 

有時會表現正常,當我按下一個按鈕,但有時我確實有再次點擊此組件上得到它以確認按鍵。

我怎樣才能確保它始終傾聽按鍵? 是否建議將事件偵聽器添加到較低級別組件中的文檔中?

+0

在反應事件系統中有一個'onKeyDown'事件檢出https://facebook.github.io/react/docs/events.html –

回答

0

這不起作用,因爲我的可點擊元素前面有一個非常大的隱形div。我讓div沒有指針事件,然後我能夠使我的keyDown函數始終如一地工作。

上述技術將工作。您可以將document.addEventListener放入一個React組件中。

1

筆的位置 - >http://codepen.io/dagman/pen/mAOrVP

const App = ({ 
    handleOnKeyDown, 
    keyCode 
}) => (
    <div> 
     <input 
      style={styles.input} 
      onKeyDown={handleOnKeyDown} 
      placeholder="Press any key to see it's code on right" 
     /> 
     <span style={styles.span}>{keyCode}</span> 
    </div> 
); 

class AppContainer extends React.Component { 
    constructor(props) { 
     super(); 
     this.state = { 
      keyCode: null 
     }; 
    } 
    handleOnKeyDown(e) { 
     this.setState({ 
      keyCode: e.keyCode 
     }); 
    } 
    render() { 
     return(
      <App 
       handleOnKeyDown={this.handleOnKeyDown.bind(this)} 
       keyCode={this.state.keyCode} 
      /> 
     ); 
    } 
} 

const mountNode = document.getElementById('app'); 
const styles = { 
    input: { 
     width: 300, 
     height: 50 
    }, 
    span: { 
     color: 'white', 
     marginLeft: 5 
    } 
}; 

ReactDOM.render(
    <AppContainer />, 
    mountNode 
); 

難道你問什麼?