一.前言
在antd
和fusion
框架中,可以利用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})
}