react如何獲取表單數(shù)據(jù)？

分為兩種情況：第一種是每次輸入都會更新狀態(tài)第二種是只有用到的時候才獲取（會用大量的ref，不推薦）

這里主要介紹第一種

//這是我們要操作的數(shù)據(jù)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>) }

除了通過傳參也可與利用標(biāo)簽的屬性
<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 })}}

總結(jié)

以上是生活随笔為你收集整理的react如何获取表单数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。