password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
输入框中填写完内容还需要手动点击发送按钮比较麻烦,监听键盘事件,判断是否按下Enter键,直接提交功能比较方便些.
监听键盘事件,判断是否按下Enter键:
“onKeyPress”方法目前还是可以使用,但是提示已弃用
React推荐使用onKeyDown或者onKeyUp来代替onKeyPress处理键盘事件。
所以可以这样修改:
现在实现了只有Enter键就好触发方法
需要避免同时按Enter键和其他按键时还发送消息的情况。
我们可以在onKeyDown的事件处理函数中检查是否只有Enter键被按下:
通过额外检查e.ctrlKey、e.shiftKey、e.altKey和e.metaKey是否也为true,就可以判断除Enter键外是否有其他按键被同时按下。
只有当仅检测到Enter键时,才会提交。如果有任何其他组合键,例如Ctrl + Enter,就不会触发提交。
或者可以用keycode直接判断:
这可以有效避免同时按其他键导致意外提交的情况,e.keyCode方法也有提示弃用,还是用第一种方法把。
有关使用上的问题，欢迎您在底部评论区留言，一起交流~
- 作者:躁静有徒
- 链接:https://blog.zaojingyoutu.top//article/f07be68f-d6cd-4c34-ac1d-28bb2651eb8b
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章