成都网站建设思乐科技,网站开发案例详解pdf,南京公司网站开发,百度论坛首页官网react如何获取表单数据#xff1f;
分为两种情况#xff1a;第一种是每次输入都会更新状态第二种是只有用到的时候才获取#xff08;会用大量的ref#xff0c;不推荐#xff09;这里主要介绍第一种
//这是我们要操作的数据state {resume:{username: ,password:}}//通过…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)} typetext /密码input onChange{this.setdata(resume,password)} typepassword /button onClick{this.send}提交/button/div)
}除了通过传参也可与利用标签的属性 input customNameresume nameusername onChange{this.setdata()} typetext / 获取属性 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 })}}
