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.valuethis.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 })}}