React键盘事件监听

异想时刻

最近做的两个项目，相当一部分时间用在了前端编码上。在做搜索框测试时，每次输入完文本后就会下意识地按一下Enter键，然后发现没有反应，又不得不使用鼠标点击。着实懒癌发作，连手离键盘这个动作都不想做了。于是乎心生一念，赶紧给按钮添加个键盘监听事件。

处理思路

其实，加个监听事件也没啥复杂的，只需要在组件相应周期装载和卸载事件即可。

Reactjs示例代码

class Sample extends React.Component {

	handleKeyDown = (e) => {
		if(e.keyCode == 13 || e.keyCode == 108) {
			console.log('The key Enter was pressed.');
		}
	}

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

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

	render() {
		return (
			<button onKeyDown={this.handleKeyDown}/>
		)
	}
}

另外，我们常用的快捷键还存在组合类型。比如，双键或三键组合。一些组合键包含了ctrl、alt和shift，而一些只是普通键的组合。对于ctrl/alt/shift按键比较好处理，它们已经作为属性集成在事件中了。只需调用属性ctrlKey、altKey和shiftKey进行判断即可。那么，超过两个普通键的组合就需要设计一下识别规则了。比如，在一定时限内对连续的几个按键进行识别，当然这也需要对按键做一点缓存处理。类似的解决方案可以找到很多，这里就不做过多赘述。

以上不过是我个人的一点思考，会存在诸多不严谨的地方，欢迎探讨。

参考资料

1, https://juejin.cn/post/6920166753909604366
2, https://blog.csdn.net/Iversons/article/details/103241165

附录

字母和数字键对应键码值(KeyCode)

按键	键码	按键	键码
A	65	S	83
B	66	T	84
C	67	U	85
D	68	V	86
E	69	W	87
F	70	X	88
G	71	Y	89
H	72	Z	90
I	73	0	48
J	74	1	49
K	75	2	50
L	76	3	51
M	77	4	52
N	78	5	53
O	79	6	54
P	80	7	55
Q	81	8	56
R	82	9	57

数字键盘对应键码值(KeyCode)

按键	键码	按键	键码
0	96	8	104
1	97	9	105
2	98	*	106
3	99	+	107
4	100	Enter	108
5	101	-	109
6	102	.	110
7	103	/	111

功能键对应键码值(KeyCode)

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

控制键对应键码值(KeyCode)

按键	键码	按键	键码
BackSpace	8	Esc	27
Tab	9	Spacebar	32
Clear	12	Page Up	33
Enter	13	Page Down	34
Shift	16	End	35
Control	17	Home	36
Alt	18	Left Arrow	37
Cape Lock	20	Up Arrow	38
Right Arrow	39	-_	189
Dw Arrow	40	.>	190
Insert	45	/?	191
Delete	46	`~	192
Num Lock	144	[{	219
;:	186	\ |	220
=+	187	]}	221
,<	188	‘“	222

多媒体对应键码值(KeyCode)

按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171