4.Uncontrolled Components(不受控組件)

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蚀之。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市捷泞,隨后出現(xiàn)的幾起案子足删,更是在濱河造成了極大的恐慌,老刑警劉巖锁右,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件壹堰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡骡湖,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門峻厚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來响蕴,“玉大人,你說我怎么就攤上這事惠桃。” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵帅涂,是天一觀的道長(zhǎng)撕瞧。 經(jīng)常有香客問我,道長(zhǎng)呐馆,這世上最難降的妖魔是什么肥缔? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮汹来,結(jié)果婚禮上续膳,老公的妹妹穿的比我還像新娘改艇。我一直安慰自己,他們只是感情好坟岔,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布谒兄。 她就那樣靜靜地躺著,像睡著了一般社付。 火紅的嫁衣襯著肌膚如雪承疲。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天鸥咖,我揣著相機(jī)與錄音燕鸽,去河邊找鬼。 笑死扛或,一個(gè)胖子當(dāng)著我的面吹牛绵咱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播熙兔,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼悲伶,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了住涉?” 一聲冷哼從身側(cè)響起麸锉,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舆声,沒想到半個(gè)月后花沉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡媳握,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年碱屁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛾找。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡娩脾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出打毛,到底是詐尸還是另有隱情柿赊,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布幻枉,位于F島的核電站碰声,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏熬甫。R本人自食惡果不足惜胰挑,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧洽腺,春花似錦脚粟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至藕坯,卻和暖如春团南,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背炼彪。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工吐根, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辐马。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓拷橘,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親喜爷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子冗疮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記檩帐,個(gè)人覺得該教程講解深入淺出术幔,比目前大...
    leonaxiong閱讀 2,843評(píng)論 1 18
  • 本筆記基于React官方文檔,當(dāng)前React版本號(hào)為15.4.0湃密。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,729評(píng)論 14 128
  • 原文地址:React.js Forms: Controlled Components 原文作者:Loren Ste...
    iKcamp閱讀 838評(píng)論 0 5
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,334評(píng)論 25 707
  • 班級(jí)情況 校區(qū):科學(xué)創(chuàng)想機(jī)器人茂業(yè)店 時(shí)間:周日上午10點(diǎn)30-11點(diǎn)30 學(xué)員:朋朋 老師:張玲 教學(xué)目標(biāo) 1....
    樂搭閱讀 512評(píng)論 0 0