前端3 --- 回车实现输入框切换

本章目的：

react实现输入框之间的切换（跳过disabled）

代码：

import React from 'react';
import {Button, Input, Form,Select} from 'antd';

const {Option} = Select;
export default class Test extends React.Component {
    constructor(props){
        super(props);
        this.state = {
        }
    };
    componentDidMount(){
        const querySeletor = `Input[class^=ant-input],Input[class^=ant-select]`; //
        const query = document.querySelectorAll(querySeletor);
        console.log('query',query);

        let actives = [];
        console.log('actives',actives);
        query.forEach((item)=>{
            if(!item.disabled){
                actives.push(item);
            }
        })
        this.inputEnter = this.ChangeEnter(actives);
    }
    componentWillUnmount() {
        this.inputEnter && this.inputEnter.destory();
    }
    
    /**********主要代码**********/
    ChangeEnter = (inputs) => {
        const init = () => {
            for(let i=0; i<inputs.length; i++){
                inputs[i].addEventListener('keydown',focus(i),false);
            }
        }
        const focus = (i) => {
            return (event) => {
                const next = ( i+1 < inputs.length ? i+1 : 0 );
                const eve = event? event : window.event ;
                console.log(eve.keyCode);
                if(eve.keyCode === 13){
                    console.log('inputs[next].tagName');
                    if(inputs[next].tagName === 'INPUT' || inputs[next].tagName === 'SELECT'){
                        console.log('inputs[next]');
                        inputs[next].focus();
                    }
                }
            }
        }
        const destory = () => {
            for(let i=0; i<inputs.length; i++){
                inputs[i].removeEventListener('keydown',focus(i),false);
            }
        }

        init();
        destory();
    }
    /*********主要代码***********/
    
    render(){
        return(
            <div>
                <Form className="form" id="form" method="post"style={{margin:"0 0 0 20px"}}>   
                    <div className="form-item">
                        <label className="form-label">货架条形码:</label>
                        <div className="input-inline" style={{width:120}}>
                            <Input type="text" className="d1" required 
                            lay-verify="required" autocomplete="off" />
                        </div>
                    </div>
                    <div className="form-item">
                        <label className="form-label">商品条形码:</label>
                        <div className="input-inline" style={{width:120}}>
                            <Input type="text" className="d2" required 
                            lay-verify="required" autocomplete="off" />
                        </div>
                    </div>
                    <div className="form-item">
                        <label classNameName="form-label">验证码:</label>
                        <div className="input-inline" style={{width:120}}>
                            <Input type="text" className="d3" required 
                            lay-verify="required" autocomplete="off" />
                        </div>
                    </div>
                    <div className="form-item">
                        <label classNameName="form-label">地区1:</label>
                        <Select 
                        defaultValue="england" 
                        style={{ width: 120 ,display:'block'}}
                        size='big'
                        disabled
                        >
                            <Option value="china">china</Option>
                            <Option value="england">england</Option>
                        </Select>
                    </div>
                    <div className="form-item">
                        <label classNameName="form-label">地区2:</label>
                        <Select 
                        defaultValue="england" 
                        style={{ width: 120 ,display:'block'}}
                        size='big'
                        >
                            <Option value="china">china</Option>
                            <Option value="england">england</Option>
                        </Select>
                    </div>
                </Form>
            </div>
        )
    }
}

“全身心投入一件事情的时候；
就不再整天想睡懒觉，不再熬夜看偶像，也不用刻意去想怎样好好生活；
删掉那些原以为离不开的东西；
然后觉得，这才是生活原本的样子。”-《德卡先生的信箱》


藏之介白石❀