2022-07-04
在这碰到的一个问题就是代码在正常的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中的下拉框以及时间控件加这个功能,后续解决了再次更新。
分类:
技术点:
相关文章:
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来,
若侵犯了您的合法权益,请来信通知我们1413333033@qq.com,
我们会及时删除,给您带来的不便,我们深表歉意。
下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,访问及下载者下载默认同意本站声明的免责申明,请合理使用切勿商用。
THE END
暂无评论内容