非受控組件表單元素的值通過refs操作dom現(xiàn)用現(xiàn)取，不受state控制
<script type="text/babel">
//創(chuàng)建組件
class Login extends React.Component {
handleSubmit = (event) => {
event.preventDefault() //阻止表單提交
const {username, password} = this
alert(`你輸入的用戶名是：${username.value},你輸入的密碼是：${password.value}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
用戶名：<input ref={c => this.username = c} type="text" name="username"/>
密碼：<input ref={c => this.password = c} type="password" name="password"/>
<button>登錄</button>
</form>
)
}
}
//渲染組件
ReactDOM.render(<Login/>, document.getElementById('test'))
</script>
缺點：非受控組件獲取表單元素的值都需要通過refs，但react建議應(yīng)避免過多使用refs荚守。
改寫成受控組件
<script type="text/babel">
//創(chuàng)建組件
class Login extends React.Component {?
//初始化狀態(tài)
state = {
username: '', //用戶名
password: '' //密碼
}
//保存用戶名到狀態(tài)中
saveUsername = (event) => {
this.setState({username: event.target.value})
}
//保存密碼到狀態(tài)中
savePassword = (event) => {
this.setState({password: event.target.value})
}
//表單提交的回調(diào)
handleSubmit = (event) => {
event.preventDefault() //阻止表單提交
const {username, password} = this.state
alert(`你輸入的用戶名是：${username},你輸入的密碼是：${password}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
用戶名：<input value={this.state.username} onChange={this.saveUsername} type="text" name="username"/>
密碼：<input value={this.state.password} onChange={this.savePassword} type="password" name="password"/>
<button>登錄</button>
</form>
)
}
}
//渲染組件
ReactDOM.render(<Login/>, document.getElementById('test'))
</script>
應(yīng)用場景
大多數(shù)推薦使用受控組件來實現(xiàn)表單翅楼，因為受控組件表單數(shù)據(jù)由React組件負(fù)責(zé)處理，非受控組件控制能力弱间坐，表單數(shù)據(jù)由DOM本身處理，但更加方便快捷邑退，代碼量少
受控組件與非受控組件區(qū)別
React受控組件和非受控組件之間的最大區(qū)別是組件的值是由React狀態(tài)state控制還是由DOM節(jié)點控制竹宋。
受控組件：
- 受控組件依賴于狀態(tài)
- 受控組件只有繼承React.Component才會有狀態(tài)
- 受控組件必須要在表單上使用onChange事件來綁定對應(yīng)的事件
- 受控組件的修改會實時映射到狀態(tài)值上，此時可以對輸入的內(nèi)容進(jìn)行校驗
非受控組件：
- 非受控組件不受狀態(tài)的控制
- 非受控組件獲取數(shù)據(jù)就是相當(dāng)于操作DOM地技，而不會更新React狀態(tài)
- 非受控組件可以很容易和第三方組件結(jié)合蜈七，更容易同時集成 React 和非 React 代碼
