需求：

（AntdProV2环境下）监听回车（Enter）事件，每次按下回车键后焦点跳转到下一个Input框

思路：

首先想到，焦点事件是一件很特殊的事件，全是Dom操作，于是回到原生js。发现解决方案还是很轻松的；给每个input框添加键盘的监听事件

，然后获取所有Input标签（也可以根据需求获取指定的Input），在一次循环中，通过监听函数的回调来判断当前是哪个Input，然后就跳转到下一个Input。

代码：

由于React的性质，在使用React时，只能使用Ref来操作DOM节点。而官方给出的文档也指明了Ref最适合的使用情况
Ref文档

根据React v16.8.6的写法，代码关键为：

1.创建Ref

this.state={
  this.mainRef = React.createRef();
}

2.绑定键盘监听事件

// input框的默认设置，即添加键盘的监听事件。根据父组件的传的isEnterSwitch来设置是否监听
const defaultConfig = isEnterSwitch ? { onKeyUp: (e) => this.onKeyUp(e) } : {};

<Input {...defaultConfig} />,

3.监听函数

  onKeyUp = (e) => {
    if (e.keyCode === 13) {
      // 只有原生的input和antd的Input才能实现按下回车键后跳转焦点,其余大部分组件的焦点事件被antd底层封装
      const inputs = this.mainRef.current.getElementsByClassName('ant-input');
      for (let i = 0; i < inputs.length; i++) {
        // 如果是最后一个input则跳至第一个input，实现焦点循环跳动
        if (i === (inputs.length - 1)) {
          inputs[0].focus();
          break;
        } else if (e.target === inputs[i]) {
          inputs[i + 1].focus();
          break;
        }
      }
    }
  };