在react项目中使用回车键（Enter）实现tab切换输入框的功能（以及Don't make functions within a loop no-loop-func的问题）

　　在这碰到的一个问题就是代码在正常的HTML文件中是没有什么问题的，可是当代码放到react项目中就会报警告Don't make functions within a loop  no-loop-func（其实大体的意思就是说不要在循环中生成或嵌套函数），多是严格模式的缘由。实现方式只须要须要添加这个效果的输入框加上一个class名‘input‘，这边使用过获取全部须要这个功能的输入框进行循环而后分别给它们加上键盘事件，经过keyCode值等于13判断为回车键。

export function changeEnter() {
    var inputs = document.getElementsByClassName('input');
    // console.log(inputs)
    var item = null;
    for(var i = 0; i < inputs.length; i++){
        item = inputs[i];
        (function() {
            var next = (i+1) < inputs.length ? i+1 : 0 ; //判断是否为最后一个输入框，是返回第一个，否返回下一个
            item.onkeydown = function(event){
                var eve = event ? event : window.event;
                // console.log(eve)
                if(eve.keyCode === 13){
                    // console.log(inputs[next])
                    if (inputs[next].tagName === 'INPUT') {
                        inputs[next].focus();    //获取焦点
                    } else {
                        console.log(22)
                    }
                }
            }
        })()
    }    
}

　　解决的方法以下：

export function changeEnter() {
    var inputs = document.getElementsByClassName('input');
    function init() {
        for(let i = 0; i < inputs.length; i++){
            inputs[i].onkeydown = focus(i)
        }     
    }
    // console.log(inputs)
    var focus = function handle(i) {
        return function(event) {
            var next = (i + 1) < inputs.length ? i + 1 : 0;  // 判断是否为最后一个输入框，是则返回第一个，不然继续下一个
            var eve = event ? event : window.event;
            if (eve.keyCode === 13) {
                if (inputs[next].tagName === 'INPUT') {
                    inputs[next].focus();    //获取焦点
                } else {
                    console.log(22)
                }
            }
        }
    }
    init()
}

　　这样的话警告就不会出现了，可是这边存在的问题就是在react+Ant Design中只适用于Input组件，像Ant Design中的Select以及日期选框都很差使，可是在原生input以及select下拉框是没有问题的。如今还没解决给Ant design中的下拉框以及时间控件加这个功能，后续解决了再次更新。