React的非受控組件和受控組件

• • • • 1.非受控組件
      • 2.受控組件
      • 3、對(duì)比受控組件和非受控組件的輸入流程：

1.非受控組件

1.在虛擬DOM節(jié)點(diǎn)上標(biāo)識(shí)一個(gè)ref屬性，并且將創(chuàng)建好的引用(dom節(jié)點(diǎn))賦值給這個(gè)ref屬性
2.react會(huì)自動(dòng)將輸入框中輸入的值放在實(shí)例的ref屬性上

// 只是不受組件控制// 創(chuàng)造組件class Text extends React.Component{login(event){event.preventDefault() // 組織默認(rèn)事件const {username ,password} = this // 結(jié)構(gòu)賦值} render(){const element = (<div id={"from"}><div>用戶名: <input type="text" name="username" ref={c => this.username = c} /></div><div>密碼: <input type="text" name="password" ref={c => this.password = c} /></div><div><input type="button" value="登錄" /></div></div>)return element}}ReactDOM.render(<Text></Text>,document.getElementById('root'))

非受控組件在底層實(shí)現(xiàn)時(shí)是在其內(nèi)部維護(hù)了自己的狀態(tài)state，這樣表現(xiàn)出用戶輸入任何值都能反應(yīng)到元素上。

2.受控組件

1.表單元素依賴于狀態(tài)，表單元素需要默認(rèn)值實(shí)時(shí)映射到狀態(tài)的時(shí)候，就是受控組件，這個(gè)和雙向綁定相似.
2.受控組件，表單元素的修改會(huì)實(shí)時(shí)映射到狀態(tài)值上，此時(shí)就可以對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn).
3.受控組件只有繼承React.Component才會(huì)有狀態(tài).
4.受控組件必須要在表單上使用onChange事件來綁定對(duì)應(yīng)的事件.

// 通過 onChange 事件，邊輸入邊通過 setState 修改狀態(tài)/*當(dāng)想要獲取表單的一些內(nèi)部狀態(tài)時(shí),就可以將表單的內(nèi)部狀態(tài)和組件的狀態(tài)進(jìn)行綁定 這樣就形成了受控組件受控組件: 當(dāng)我們想要 組件state狀態(tài)機(jī) 和 表單空間的 state 一致時(shí)，就可以使用 受控組件，當(dāng)我們想要給表單，設(shè)置value屬性或者checked時(shí)，React 就會(huì)認(rèn)為我們要實(shí)現(xiàn)一個(gè)受控組件，這時(shí)必須給控件加 onChange 處理 onChange 再把 控件的狀態(tài)同步給組件非受控組件: 我們不需要同步 value 值 ，使用：(defaultValue,defaultChecked)*/class Text extends React.Component{constructor(props){super(props) // 實(shí)例化組件this.state = {}}saveDate = (dataType,event) => {this.setState({[dataType]:event.target.value})}login = (event) => {event.preventDefault() // 阻止表單提交}render(){return (<div><form onSubmit={this.login}>用戶名:<input type="text" placeholder="你輸入賬號(hào)" name='username' onChange={event => this.saveDate('username',event)}/>密碼:<input type="text" placeholder="請(qǐng)輸入密碼" name='password' onChange={event => this.saveDate('password',event)}/><br/><input type="submit" value='登錄'/> </form><h1>用戶名：{this.state.username ? this.state.username : '暫無用戶'} </h1><h1>密碼： {this.state.password ? this.state.password : '空'}</h1></div>) }}ReactDOM.render(<Text></Text>,document.getElementById('root'))

3、對(duì)比受控組件和非受控組件的輸入流程：

1.非受控組件： 用戶輸入的內(nèi)容 => input 中顯示用戶輸入的內(nèi)容
2,受控組件： 用戶輸入的內(nèi)容 => 觸發(fā)onChange事件 => 設(shè)置 state狀態(tài)username/password = 的內(nèi)容 => 渲染input使他的value變成用戶輸入的內(nèi)容

總結(jié)

以上是生活随笔為你收集整理的React的非受控组件和受控组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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