react 输入框 回车事件切换

1. 在web项目中，多个输入框时，按tab 键是能够进行下一个切换聚焦的，回车也能够加上监听事件，方便用户处理多个输入的事件。
2. js 处理input 监听事件

   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(); // 用于销毁监听
       }
   }}
   
   module.exports = changeEnter
   

3. react 中使用

   
   componentDidMount() {
       const inputSelector = `.page-container input[class$="ant-input"], .page-container input[class$="ant-input-number-input"],.textarea_box input[class$="ant-input-lg"]`
       const changes = document.querySelectorAll(inputSelector); // 
       let activeChanges = []
       changes.forEach((item) => {
         if (!item.disabled) { // 过滤disabled 属性的输入框
           activeChanges.push(item)
         }
       })
       // console.log('changes', changes);
       this.inputEnter = changeEnter(activeChanges);
   }
   componentWillUnmount() {
   	this.inputEnter && this.inputEnter.destory();
   }
   

   其中input[class$="ant-input"] 取法是为了获取 ant-input 结尾的input输入框，