前言：很多人在react項(xiàng)目中會使用到ant design的UI組件，雖然功能強(qiáng)大，但是樣式修改起來十分費(fèi)勁，像簡單的form表單input輸入校驗(yàn)提交，用ant實(shí)在大材小用。

功能需求：input輸入框中有些有默認(rèn)值，但是只有點(diǎn)提交的時候才會儲存修改的值。

1.首先肯定得設(shè)置this.state，獲取組件傳遞的默認(rèn)值，后面有一個布爾值是模擬真實(shí)場景可能存在的情況，也是后面save函數(shù)的值不從this.state傳遞，而是從localValue傳遞的原因。構(gòu)造函數(shù)中給事件綁定this（this.changeInputValue.bind(this)），對不懂es6箭頭函數(shù)的同學(xué)是一個較好的方式。

2.form表單dom結(jié)構(gòu)的編寫，在react中如果有默認(rèn)值并且可修改，必須牢記使用defaultValue，而不是value，value不可以修改。對于一行較多事件或樣式的標(biāo)簽，推薦以下寫法。下圖主要作用是設(shè)置默認(rèn)值，綁定事件，然后使用name做關(guān)聯(lián)。

3.新增定義一個全局變量，類似本地緩存的數(shù)據(jù)，做一個數(shù)據(jù)間的橋接。因?yàn)榻M件內(nèi)部函數(shù)需求讀取，所以設(shè)置的默認(rèn)值都為空。

4.事件方法，e.target就是當(dāng)前的input框以及內(nèi)容，感興趣的同學(xué)可以打印e，以及e.target查看元素。第一個函數(shù)主要做的是保存值的一個操作，監(jiān)聽onChange。第二個函數(shù)主要是遍歷localValue的屬性并且將提交的值賦給this.state中的屬性，當(dāng)頁面其他地方需要用到修改的屬性值，通過此舉就可以直接賦值了，或者再次編輯時。localValue[k] = this.state[k]，當(dāng)有些內(nèi)容由更改，有些內(nèi)容沒有更改時，需要把現(xiàn)在狀態(tài)的值賦給localValue。

5.接下來就是連接服務(wù)器的事了，不多做說明。