在前面的課程中，我們介紹了在React中如何處理表單。通過截獲控件onChange方法抛虏，從而將value控制于組件中的模式叫做Controlled Component硫戈。
ControlledComponent的一個特點是代碼量大，較為麻煩埃元。在React中氢哮，還有另一種處理表彰的模式葛圃，叫UncontrolledComponent默垄。
前一節(jié)中我們介紹了React中一個非常重要的特性：Ref函數(shù)此虑。利用Ref函數(shù)，可以幫助我們實現(xiàn)UnControlled Component口锭。
UnControlled Component不截獲控件的值寡壮，而是通過Ref函數(shù)，獲取到控件DOM讹弯，每次取值時直接從DOM中取况既。
通過下面的例子來了解一下：
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value); // 根據(jù)DOM獲取value
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} /> // 使用ref函數(shù)記錄下DOM
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
使用Uncontrolled Component 模式下，可以使用defaultValue來給控件設(shè)置初始值：
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
defaultValue="Bob" // 使用defautValue設(shè)置初始值
type="text"
ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
如何優(yōu)化React性能组民？
好棒仍，這一節(jié)就到這里。現(xiàn)這里臭胜，你已經(jīng)達到React中級水平莫其，后續(xù)我將介紹更多React高級技術(shù)。
想學(xué)計算機技術(shù)嗎耸三？需要1對1專業(yè)級導(dǎo)師指導(dǎo)嗎乱陡？想要團隊陪你一起進步嗎?歡迎加我為好友！微信號：iTekka仪壮。
