Question

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

Component extends React.Component {

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

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

}

有时按下按钮时它会表现正常但有时我实际上必须再次点击此组件才能让它确认按键。

如何确保始终听取按键？是否可以在较低级别的组件中向文档添加事件侦听器？

Answer 1

在这里写笔 - ＆gt; 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
);

你问的是什么？

Answer 2

它没有工作，因为我的可点击元素前面有一个非常大的隐形div。我让div没有指针事件，然后我能够让我的keyDown函数一直工作。

上述技术可行。您可以将document.addEventListener放在子React组件中。

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

2 个答案: