react 实现enter提交内容

输入框中填写完内容还需要手动点击发送按钮比较麻烦,监听键盘事件,判断是否按下Enter键,直接提交功能比较方便些.

监听键盘事件,判断是否按下Enter键:

<textarea
  onKeyPress={e => {
    if(e.key === 'Enter') {
      submitText(); //自定义提交事件的方法
    }
  }}
/>

“onKeyPress”方法目前还是可以使用,但是提示已弃用

React推荐使用onKeyDown或者onKeyUp来代替onKeyPress处理键盘事件。所以可以这样修改:

// 替换onKeyPress为onKeyDown
<textarea
  onKeyDown={e => {
   if(e.key === 'Enter') {
     submitText();
    }
  }}
>
</textarea>

// 或者使用onKeyUp
<textarea
  onKeyUp={e => {
    if(e.key === 'Enter') {
      submitText();
     }
  }}  
>
</textarea>

现在实现了只有Enter键就好触发方法

需要避免同时按Enter键和其他按键时还发送消息的情况。

我们可以在onKeyDown的事件处理函数中检查是否只有Enter键被按下:

const enterOnly = e => {
  return e.key === 'Enter' && e.ctrlKey === false && e.shiftKey === false && e.altKey === false && e.metaKey === false;
}

<textarea
  onKeyDown={e => {
     if(enterOnly(e)) {
       submitText();
     }
  }}
>
</textarea>

通过额外检查e.ctrlKey、e.shiftKey、e.altKey和e.metaKey是否也为true,就可以判断除Enter键外是否有其他按键被同时按下。

只有当仅检测到Enter键时,才会提交。如果有任何其他组合键,例如Ctrl + Enter,就不会触发提交。

或者可以用keycode直接判断:

if(e.keyCode === 13 && e.ctrlKey === false) {
  // 只有Enter键按下
}

这可以有效避免同时按其他键导致意外提交的情况,e.keyCode方法也有提示弃用,还是用第一种方法把。

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

监听键盘事件,判断是否按下Enter键:

需要避免同时按Enter键和其他按键时还发送消息的情况。

读者评论