react如何获取表单数据?
分为两种情况:
第一种是每次输入都会更新状态
第二种是只有用到的时候才获取(会用大量的ref,不推荐)
这里主要介绍第一种
//这是我们要操作的数据
state = {
resume:{
username: '',
password:''
}
}
//通过传参的方式
setdata = (objname, key) => {
console.log(window)
return (e) => {
console.log(window)
console.log(objname, key, e)
const data = this.state[objname]
data[key] = e.target.value
this.setState({ [objname]: data })
}
}
render(){
return(
<div>
账号:<input onChange={this.setdata('resume','username')} type="text" />
密码:<input onChange={this.setdata('resume','password')} type="password" />
<button onClick={this.send}>提交</button>
</div>
)
}
除了通过传参也可与利用标签的属性
<input customName="resume" name="username" onChange={this.setdata()} type="text" />
获取属性 e.target.name
e.target.getAttribute('customName')
获取到属性之后和传参的操作也就一致了
遇到多选框就需要稍微的改变一下了
setdata = (objname, key) => {
return (e) => {
const data = this.state[objname]
if (e.target.type === "checkbox") {
data[key]=e.target.checked
} else {
data[key] = e.target.value
}
this.setState({ [objname]: data })
}
}