不采用antd/fusion,React怎么提交多个表单数据

298 阅读1分钟

一.前言

antdfusion框架中,可以利用form表单收集多个表单的Value和提交的error,验证成功后即可提交服务器。

二.常用方法

2.1采用柯里化
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() //阻止表单默认提交
}
//柯里化的方式
saveInfo = (dataType) => {
    return (event) => {  //将回调函数交给saveInfo去执行,react去调用回调,所以可以接收到event对象。
        console.log([dataType],event.target.value) //[dataTYpe],读取dataType的变量
    }   
}
2.2不采用柯里化
state = {
    username:"",
    password:""
}
render(){
    return (
      <form onSubmit="this.handlesubmit">
         <input name="username" onChange={(e) => {this.saveInfo("username",e.target.value)}} /> //给onChange一个回调
         <input name="password" onChange={(e) => {this.saveInfo("password",e.target.value)}} />
      </form>
    )
}
handlesubmit = (e) => {
    e.preventDefault() //阻止表单默认提交
}
//不用回调的方式
saveInfo = (dataType,value) => {
    this.setState({[dataType]:value})
}