Question

我有组件显示问题。每个问题都是反应成分。按Enter键，它应导航到下一个问题。我已经将onKeyPress连接到Div元素，但有时会捕获事件，有时它不会被捕获。

<div className="-" onKeyPress={(e) => this.navigateToNext(e)}>
    <div className="preview-head">
     //Other stuff here
    </div>{/* preview-container*/}
</div>

navigateToNext(e) { 
    if (option.get('selected') === true && e.charCode === 13) {
                this.goToNextQuestion();
    }
}

任何人都可以告诉我任何其他方法来处理这个问题。

Answer 1

我会在componentWillMount中为事件监听器连接一个事件监听器，并检查它是否为回车键。请记住在componentWillUnmount中删除事件监听器。

我猜这个问题是关于div的重点与否。如果它没有聚焦，则按键事件不会触发该元素，因此没有任何反应

Answer 2

正如@spirift所说，你的div没有焦点。试试这个：

将ref={(c) => { this.ref = c }}添加到div并关注生命周期方法：

componentDidMount() {
    this.ref.focus();
}

我们可以在响应中触发Div Tag上的KeyPress

2 个答案: