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