React from form submission, automated check

Introduction: Based on the React.js+es6+antd (Ant Gold UI), but this table only used the first two, to automate the verification, for the option to be validated can be configured, the password and message function to do a 2-level verification, the other only to do a first-level verification, The validation hint uses the model method in Antd.

Effect Diagram

2. Code

Import React from ' React '; Import '..
/css/studyform.less ';


Import {Modal} from ' Antd ';
Const checkbox=[];
        Class Studyform extends react.component{constructor (props) {super (props);
            this.state={username: ', password: ', radios: ', checkboxs:[],

        Message: '};
    This.handlechange = This.handleChange.bind (this);
    }; query = {username:{value: ', validata:[{errmessage
                    : ' User name must be filled in ', test: (value) = = {return value;
                }}]}, password:{value: ', validata:[ {errmessage: ' Password must be filled ', test: (value) = = {return Valu
                    E }}, {errmessage: ' Password length is 6', test: (value) = = {return Value.length = = 6;
                }}]}, radios:{value: ', validata:[ {errmessage: ' Professional category must be selected ', Test: (value) = = {return VA
                    Lue
                }}]}, checkboxs:{value: ', validata:[   {errmessage: ' People in the industry must choose a ', test: (value) = = {return
                    Value
                }}]}, message:{value: ', validata:[ {errmessage: ' Please write a message ', test: (value) = = {return value
                    ; }}, {errmessage: ' Be generous, have aMore than 10 words ', test: (value) = {return value.length > 10;
    }
                }
            ]
        }
    };
    errworing = (Text) = {modal.warning ({title:text}); }/** * can be reused code *//////////////////For checkbox deselected GetIndex = (val,array) + = (Let I=0;i<array.
            length;i++) {if (array[i] = = val) {return this.removeitem (I,array);
                }}} RemoveItem = (C,array) =>{for (let i=0;i<array.length;i++) {if (c==i) {
                Array.splice (c,1);
            return array;
        }}} HandleChange = (name,event) = {var newstate = {};
        Console.log (Name,event.target);
        Event.target.checked?newstate[name] = event.target.checked:newstate[name] = Event.target.value;
  if (name = = ' Checkboxs ') {if (event.target.checked) {              Checkbox.push (Event.target.value);
            Newstate[name] = checkbox;
                }else{let newarray=[];
                Console.log (This.getindex (Event.target.value,checkbox));
                for (let i=0;i<checkbox.length;i++) {Newarray.push (checkbox[i]);
            } Newstate[name] = NewArray;
        }}else{Newstate[name] = Event.target.value;
        }//Console.log (newstate);
        This.setstate (newstate);
            For (let key in This.query) {if (key = = name) {This.query[key].value = Event.target.value;
    }
        }
    };
            Valiform = () = {for (let key in This.query) {//Console.log (This.query[key]);
            Let item = This.query[key];
            Let Valiitem = Item.validata; if (valiitem!== undefined) {for (let K in Valiitem) {Let Valis = ValiiteM[K];
                        if (!valis.test (Item.value)) {this.errworing (valis.errmessage);
                    return false; 
    }}}} return true;
        } Submitfun = () = {//Pre-submission front-end verification//This.valiform ();
        Alert (This.valiform ()) if (This.valiform ()!== true) {return false;
    } console.log (This.state)//alert (' submitted ');
    Console.log (This.username.value);
    }; Render () {return (<div> {/* <form action= "" > */} &LT
                        ;d IV Classname= "Form-group" > <label htmlfor= "username" > User name:</label> <input type= "text" id= "username" name= "username" Value={this.state.username} onchange={this.handlechange.bind ( This, ' username ')}/> </div> <div classname= "form-group "> <label htmlfor=" password "> password:</label> <input ty pe= "password" id= "password" name= "password" Value={this.state.password} onchange={this.handlechange.bind (This, '
                        Password ')}/> </div> <div classname= "Form-group" > <label htmlfor= "Code_type" > Code type:</label> <input type= "Radio" name= "Radios" Val Ue= ' JAVASCRIPT ' onchange={this.handlechange.bind (this, ' radios ')}/>javascript <input type= "Ra Dio "name=" Radios "value= ' JAVA ' onchange={this.handlechange.bind (this, ' radios ')}/>java <inpu
                        T type= "Radio" name= "Radios" value= ' PHP ' onchange={this.handlechange.bind (this, ' radios ')}/>php
                        <input type= "Radio" name= "Radios" value= ' GO ' onchange={this.handlechange.bind (this, ' radios ')}/>go <input type= "Radio" name= "Radios "value= ' PYTHON ' onchange={this.handlechange.bind (this, ' radios ')}/>python </div> <div classname= "Form-group" > <label htmlfor= "Senior" > Industry veteran: &LT;/LABEL&G
                        T   
                        <input type= "checkbox" Name= "CheckBox1" value= "Ruan Yi Feng" onchange={this.handlechange.bind (This, ' Checkboxs ')}/> Ruan Yi Feng <input type= "checkbox" Name= "CheckBox2" value= "Desert Poor Autumn" Onchange={this.handlechange.bind (this, ' checkb Oxs ')}/> Desert Poor autumn <input type= "checkbox" Name= "Checkbox3" value= "Mo Mo" Onchange={this.handlechange. Bind (this, ' Checkboxs ')}/> mo <input type= "checkbox" Name= "Checkbox4" value= "Li Tinghui" onchange={ This.handleChange.bind (This, ' Checkboxs ')}/> Eon restore </div> <div classname= "
                        Form-group "> <label htmlfor=" message "> Message to Industry veterans:</label><textarea name= "" "id=" message "cols=" "rows=" "Value={this.state.message" Onchange={this.handlechange.bind ( This, ' message ')}></textarea> </div> <div classname= "Form-group" &
                        Gt
                            <label htmlfor= "Select_group" > Date:</label> <select name= "Select_group" >
                            <option> Please select </option> <option>2017</option>
                            <option>2018</option> <option>2019</option> <option>2020</option> </select> </d 
                Iv> <p><button type= "PRIMARY" onclick={this.submitfun}> submit </button></p>
    {/* </form> *} </div>);
}
}; Export default studyform;

3. Submit background form data