您的位置: 首页  >  IT文章  >  在react项目中使用回车键（Enter）实现tab切换输入框的功能（以及Don't make functions within a loop no-loop-func的问题）

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

分类: IT文章 • 2022-05-12 21:03:39

　　在这碰到的一个问题就是代码在正常的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中的下拉框以及时间控件加这个功能，后续解决了再次更新。

相关推荐