在前面的課程中,我們介紹了在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仪壮。