011|React之Uncontrolled Component

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末憨颠,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子积锅,更是在濱河造成了極大的恐慌爽彤,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缚陷,死亡現(xiàn)場離奇詭異适篙,居然都是意外死亡,警方通過查閱死者的電腦和手機箫爷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進店門嚷节,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虎锚,你說我怎么就攤上這事硫痰。” “怎么了翁都?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵碍论,是天一觀的道長。 經(jīng)常有香客問我柄慰,道長鳍悠,這世上最難降的妖魔是什么税娜? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮藏研,結(jié)果婚禮上敬矩,老公的妹妹穿的比我還像新娘。我一直安慰自己蠢挡,他們只是感情好弧岳,可當(dāng)我...
    茶點故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著业踏,像睡著了一般禽炬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上勤家,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天腹尖,我揣著相機與錄音,去河邊找鬼伐脖。 笑死热幔,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的讼庇。 我是一名探鬼主播绎巨,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蠕啄!你這毒婦竟也來了场勤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤介汹,失蹤者是張志新(化名)和其女友劉穎却嗡,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘹承,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年如庭,在試婚紗的時候發(fā)現(xiàn)自己被綠了叹卷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡坪它,死狀恐怖骤竹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情往毡,我是刑警寧澤蒙揣,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站开瞭,受9級特大地震影響懒震,放射性物質(zhì)發(fā)生泄漏罩息。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一个扰、第九天 我趴在偏房一處隱蔽的房頂上張望瓷炮。 院中可真熱鬧,春花似錦递宅、人聲如沸娘香。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽烘绽。三九已至,卻和暖如春俐填,著一層夾襖步出監(jiān)牢的瞬間诀姚,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工玷禽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留赫段,地道東北人。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓矢赁,卻偏偏與公主長得像糯笙,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子撩银,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2 361

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