react+js实现回车切换页面input和select框

需求：页面上有input和select等输入框和下拉框，回车相互切换

实现：

html：

      <div className="input-container">
        <div>
          <Input />
          <Input />
        </div>
        <div>
          <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
          </select>
        </div>
       </div>

javascript核心功能：

   function changeEnter(inputs) {
    const init = () => {
        for(let i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('keydown', focus(i), false); // 每个input添加键盘监听
        }
    }

    const focus = (i) => {
        return (event) => {
            const next = i + 1 < inputs.length ? i + 1 : 0; // 判断是否为最后一个输入框，是则返回第一个，否则继续下一个
            const eve = event ? event : window.event;
            if (eve.keyCode === 13) {
                if (inputs[next].tagName === 'INPUT' || inputs[next].tagName === 'SELECT') {
                    inputs[next].focus();
                }
            }
        }
    }

    const destory = () => {
        for(let i = 0; i < inputs.length; i++) {
            inputs[i].removeEventListener('keydown', focus(i), false); // 解除监听
        }
    }

    init();

    return {
        destory() {
            destory();
        }
    }
   }

代码调用：

  componentDidMount() {
    // 获取页面上input和select的dom元素
    const changes = document.querySelectorAll('.input-container input, select');
    this.inputEnter = changeEnter(changes);
  }
  componentWillUnmount() {
    // 卸载解除监听事件
    this.inputEnter.destory();
  }

实现效果：

备注：如果是Ant的Select组件，要换种写法，可以用官方文档上写的onInputKeyDown（按下回车时的回调）实现，写法稍有不同，但实现逻辑差不多。