zoukankan      html  css  js  c++  java
  • 在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中的下拉框以及时间控件加这个功能,后续解决了再次更新。

  • 相关阅读:
    Saslauthd服务实现SMTP发信认证
    携程Apollo一键编译脚本+部署实现
    Shell编程总结
    Oracle数据库的安装 【超详细的文图详解】
    区块链技术开发导向 聊应用及正确发展方向
    单机Qps上限是多少?
    Linux运维第二课----Linux发展史、环境准备
    JAVA_新建一个方法并且求三个数中的最大值
    iOS视频边下载边播放
    Python从零搭建Conf_Web配置管理平台
  • 原文地址:https://www.cnblogs.com/wantu/p/10382307.html
Copyright © 2011-2022 走看看