React版本:15.4.2
**翻譯:xiyoki **
在大多數(shù)情況下旗唁,我們建議使用受控組件來實(shí)現(xiàn)表單枫吧。在受控組件中,表單數(shù)據(jù)由React組件處理直奋。替代方法是不受控組件狼荞,其中表單數(shù)據(jù)由DOM本身處理。
編寫不受控組件而不是為每個(gè)狀態(tài)更新編寫事件處理程序帮碰,你可以使用ref從DOM獲取表單值相味。
例如,在一個(gè)不受控的組件中殉挽,此代碼接收單個(gè)名稱:
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>
);
}
}
由于不受控組件在DOM中保持了真實(shí)來源丰涉,因此當(dāng)使用不受控組件時(shí)拓巧,有時(shí)更容易集成React和非React代碼。如果你想quick和dirty一死,它也可以稍微少一些代碼肛度。否則,通常應(yīng)使用受控組件投慈。
如果仍然不清楚在特定情況下應(yīng)該使用哪種類型的組件承耿,則這篇文章能為你提供幫助this article on controlled versus uncontrolled inputs 。
Default Values(默認(rèn)值)
在React渲染生命周期中伪煤,表單元素上的value
屬性將覆蓋DOM中的值加袋。對(duì)于不受控組件,你通常希望React指定初始值抱既,但不要控制后續(xù)更新职烧。要處理這種情況,你可以指定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>
支持defaultValue
蚀之。