KeyboardEvent 对象的 keyCode 属性已被弃用

什么是 KeyboardEvent ？

KeyboardEvent对象描述了用户与键盘的交互。 每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown，keypress与keyup用于识别不同的键盘活动类型。

传送门：KeyboardEvent - Web API 接口参考 | MDN

什么是 keyCode 属性 ？

这个只读的属性KeyboardEvent.keyCode代表着一个唯一标识的所按下的键的未修改值，它依据于一个系统和实现相关的数字代码。这通常是与密钥对应的二进制的ASCII (RFC 20) 或 Windows 1252 码。如果这个键不能被标志，这个值为 0 。

该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

传送门：KeyboardEvent.keyCode - Web API 接口参考 | MDN

使用 key 属性替代 keyCode 属性

什么是 key 属性？

只读属性KeyboardEvent.key返回用户按下的物理按键的值。

传送门：KeyboardEvent.key - Web API 接口参考 | MDN

解决方案

我们以最常见使用 keyCode 属性，监听“回车 (Enter) 按键” 来举例。

原始方案：

<Button
  onKeyDown={(event) => {
    if (event.keyCode === 13) {
      // 阻止默认的回车事件执行
      event.preventDefault();
    }
  }}
>
  我是一个按钮
</Button>

升级，改造方案：

<Button
  onKeyDown={(event) => {
    const { key, keyCode } = event;
    let handled = false;
    if (key !== undefined && key === 'Enter') {
      handled = true;
    } else if (keyCode !== undefined && keyCode === 13) {
      handled = true;
    }
    if (handled) {
      // 阻止默认的回车事件执行
      event.preventDefault();
    }
  }}
>
  我是一个按钮
</Button>

（完）