How can React submit multiple forms without using ANTD/Fusion

A preface.

In ANTD and Fusion frameworks, form forms can be used to collect values and submitted errors of multiple forms and submit them to the server after successful verification.

Two. Common methods

2.1 Corrification is adopted

state = {
    username:"".password:""
}
render(){
    return (
      <form onSubmit="this.handlesubmit">
         <input name="username" onChange="this.saveInfo("username") "/ >
         <input name="password" onChange="this.saveInfo("password") "/ >
      </form>
    )
}
handlesubmit = (e) = > {
    e.preventDefault() // Prevent forms from being submitted by default
}
// Currified
saveInfo = (dataType) = > {
    return (event) = > {  React calls the callback, so you can receive event objects.
        console.log([dataType],event.target.value) //[dataTYpe], reads variables of dataTYpe}}Copy the code

2.2 Corrification is not adopted

state = {
    username:"".password:""
}
render(){
    return (
      <form onSubmit="this.handlesubmit">
         <input name="username" onChange={(e)= >SaveInfo ("username",e.target.value)}} /> // Give onChange a callback<input name="password" onChange={(e)= > {this.saveInfo("password",e.target.value)}} />
      </form>
    )
}
handlesubmit = (e) = > {
    e.preventDefault() // Prevent forms from being submitted by default
}
// No callback
saveInfo = (dataType,value) = > {
    this.setState({[dataType]:value})
}
Copy the code