?
本文檔使用 PHP中文網(wǎng)手冊(cè) 發(fā)布
在大多數(shù)情況下，我們建議使用受控組件來(lái)實(shí)現(xiàn)表單。在受控組件中，表單數(shù)據(jù)由React組件處理。另一種選擇是不受控制的組件，其中表單數(shù)據(jù)由DOM本身處理。
要編寫(xiě)一個(gè)不受控制的組件，而不是為每個(gè)狀態(tài)更新編寫(xiě)一個(gè)事件處理程序，可以使用ref從DOM獲取表單值。
例如，該代碼在不受控制的組件中接受單個(gè)名稱(chēng)：
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);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Name:<input type="text" ref={(input) => this.input = input} /></label>
<input type="submit" value="Submit" /></form> ); }
}在CodePen上試用它。
由于不受控制的組件在DOM中保留了真相源，因此在使用不受控制的組件時(shí)，集成React和非React代碼有時(shí)更容易。如果你想快速和骯臟，它也可以少一點(diǎn)代碼。否則，您通常應(yīng)該使用受控組件。
如果仍然不清楚您應(yīng)該在特定情況下使用哪種類(lèi)型的組件，那么您可能會(huì)發(fā)現(xiàn)這篇關(guān)于受控與非受控輸入的文章會(huì)有所幫助。
默認(rèn)值
在React渲染生命周期中，value表單元素上的屬性將覆蓋DOM中的值。對(duì)于不受控制的組件，您通常希望React指定初始值，但讓后續(xù)更新不受控制。要處理這種情況，您可以指定一個(gè)defaultValue屬性而不是value。
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Name:<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" /></form> );
}同樣，<input type="checkbox">和<input type="radio">支持defaultChecked，并<select>與<textarea>支持defaultValue。