如何确保事件侦听器始终在ReactJS子组件内调用？

我在下面有一个ReactJS组件。即使我的组件没有对焦，我也想听一下按键。它将始终呈现，但它不是网页上唯一的组件。当我按下SHIFT键时，事件监听器将调用一个函数。该组件不是我网页上的最顶层组件;它有一个父母。如何确保事件侦听器始终在ReactJS子组件内调用？

Component extends React.Component { 

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

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

}

有时会表现正常，当我按下一个按钮，但有时我确实有再次点击此组件上得到它以确认按键。

我怎样才能确保它始终倾听按键？是否建议将事件侦听器添加到较低级别组件中的文档中？

来源

2016-09-20 user1261710

在反应事件系统中有一个'onKeyDown'事件检出https://facebook.github.io/react/docs/events.html –

这不起作用，因为我的可点击元素前面有一个非常大的隐形div。我让div没有指针事件，然后我能够使我的keyDown函数始终如一地工作。

上述技术将工作。您可以将document.addEventListener放入一个React组件中。

来源

2016-09-22 21:44:56 user1261710

笔的位置 - >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 
);

难道你问什么？

来源

2016-09-20 22:58:52

如何确保事件侦听器始终在ReactJS子组件内调用？

回答

相关问题