React.js中实现回车键Enter登录分析

我们平时在计算机上登录一些网站时，基本上都可以在输入用户名密码之后，不点击登录按钮，按键盘的回车键Enter来确定登录。

或者填好一些表单，也可以使用回车键Enter提交表单。

逻辑分析

我们以登录举例，看看在React中如何实现回车键提交登录请求。

现在我们有两个输入框分别输入用户名和密码，一个按钮可以登录。

我们需要实现两个逻辑：

1. 点击登录按钮，触发按钮onClick事件，在下面代码中即执行login()函数，进行正常登录逻辑。
2. 用户输入完成后，不点击按钮，按键盘进行登录。

a.) 给输入框添加onKeyUp事件

首先我们需要确定，用户在输入完哪个输入框的值，没有丢失焦点之前可以提交登录请求。

比如登录，一般是在输入完密码并不丢失焦点时，按回车键。那么我们需要给这个输入框加上onKeyUp事件。在下面的代码中，我们给输入密码框添加了onKeyUp事件，如果你的产品可以在任意输入框提交，则全都加上onKeyUp事件。

注意此处是不丢失焦点，即光标仍在这个输入框内，如果用户输入完，点击了页面其他地方，导致这个输入框失去焦点，那么此时在点击键盘的键，不会触发这个input的onKeyUp事件。

b.) 添加onKeyUp事件触发的函数

在下面的代码中，onKeyUp事件触发了comfirmLogin函数，这个函数的内容是判断用户输入的是不是回车键，即e.key == "Enter"，如果true，则是回车键，进行正常登录。

代码

<label>用户名：</label>
<input
  ref="user"
  type="text"
  placeholder="请输入用户名"
  name="user"
  required
/>
<label>密码：</label>
<input
  ref="password"
  type="password"
  placeholder="请输入密码"
  name="password"
  onKeyUp={e => this.comfirmLogin(e)}
  required
/>
<button
  type="button"
  disabled={this.state.disabledLogin}
  onClick={() => this.login()}
>
  登录
</button>

comfirmEnter(e) {
  if (e.key == "Enter") {
    this.login();
  }
}

关于onKeyUp / onKeyDown / onKeyPress

1. onkeyup属性用来获取或设置当前元素的keyup事件的事件处理函数。

   在当前元素上释放键盘按键时会触发keyup事件。

   如果一直按着键盘某键而不释放、不松手，那么不会被触发。

2. onkeydown属性用来获取或设置当前元素的keydown事件的事件处理函数。

   当用户按下键盘上的按键时会触发keydown事件。

   只要按下键盘就会触发，不管是否释放。

3. onkeypress属性用来获取或设置当前元素的keypress事件的事件处理函数。

   当用户在键盘上按下任意键时，应当会触发 keypress 事件。然则有些浏览器不会触发某些键的 keypress 事件。

   Webkit-based 浏览器（如 Google Chrome 及 Safari）不会触发方向键的 keypress 事件。

   Firefox 不会触发如 SHIFT 键等修改键的 keypress 事件。

   存在浏览器兼容性问题。

在定义中为小写，但在React中使用时，使用小驼峰形式的函数名。

在上面的代码中我们使用了onKeyUp。

使用其他两个也可以，但是如果此处不是判断Enter键，有可能包含方向键，那么使用onKeyPress会存在兼容问题。

而使用onKeyDown在登录这个场景没有onKeyUp更符合用户使用习惯，如果是游戏等需要灵敏度高时，onKeyDown更符合场景。

关于e.keyCode / e.charCode / e.key

1. e.keyCode：
   KeyboardEvent.keyCode，返回一个表示系统和实现相关的数字代码的 Number， 用于标识按键的未修改值。

2. e.charCode：
   KeyboardEvent.charCode，返回一个表示按键的 Unicode 编码的 Number； 此属性仅由 keypress 事件使用。 对于其 char 属性包含多个字符的按键是该属性中第一个字符的 Unicode 值。在火狐26中, 将返回可打印字符的代码。

3. e.key：
   KeyboardEvent.key，返回一个事件表示键值的 DOMString。

我们使用上面的React.js代码，修改密码输入框的属性进行测试。

如果使用onKeyUp / onKeyDown，按下回车键Enter：

e.keyCode = 13
e.charCode = 0
e.key = "Enter"
e.code = undefined

如果使用onKeyPress，按下回车键Enter：

e.keyCode = 0
e.charCode = 13
e.key = "Enter"
e.code = undefined

在MDN上显示，charCode和keyCode详情页介绍都有This feature is no longer recommended，不推荐再使用这两个属性了。在测试结果中，使用不同的属性，这两个属性的结果完全相反。

在charCode的详情页写着Do not use this property, as it is deprecated. Use the key property instead.，推荐我们使用KeyboardEvent.key属性。

关于e.code，如果用户没有使用预期的键盘布局，则无法使用code值来确定用户按键的名称。要确定哪个字符与键事件对应，请改用KeyboardEvent.key属性。上面代码测试结果中，e.code全为undefined。

上面的验证中，只有e.key的值是相同的。根据MDN和实际测试，请使用KeyboardEvent.key。

参考资料

onKeyUp / onKeyDown / onKeyPress

keyCode / charCode / key