React 实现键盘监听事件

1、在需要进行监听的Dom上添加 onKeyDown 方法:

 

2、定义 handleKeyDown 方法及事件处理:

//keyCode 38=up arrow  40=down arrow   13=Enter
handleKeyDown = (e) => {
	if (e.keyCode === 13) {
		console.log("按下了Enter键")
        this.handleSearch();
	}
}

3、在 componentWillReceiveProps 钩子中定义键盘监听事件:

componentWillReceiveProps(nextProps) {
	document.addEventListener('keydown',this.handleKeyDown);
}

4、在 componentWillUnmount 钩子中移除键盘监听事件:

componentWillUnmount() {
	document.removeEventListener('keydown',this.handleKeyDown);
}

END

你可能感兴趣的:(React爬坑之路)