買(mǎi)了一包大雞排也沒(méi)心思吃，解決完這個(gè)問(wèn)題后，狠狠地咬了一口大雞排汽纤！
之前每次用 fetch 都是獲取數(shù)據(jù)，沒(méi)有提交過(guò)參數(shù)蔓同，但是現(xiàn)在做的登錄功能，是要將表單中輸入的用戶名和密碼拿到后提交給后臺(tái)服務(wù)器端，并得到返回?cái)?shù)據(jù)來(lái)判斷用戶名和密碼是否正確。
1塔逃、 react 表單
按照以往 js 獲取表單數(shù)據(jù)的方法，當(dāng)然是獲取到該 input 的 ID前酿，然后根據(jù) id 定位后獲取到其 value 值患雏，但是很可惜鹏溯，react 不能這樣做罢维。
react 對(duì)表單元素做了優(yōu)化處理，對(duì)其進(jìn)行抽象處理丙挽，使其使用方式更統(tǒng)一和規(guī)范肺孵。
約束性組件和非約束性組件
約束性組件，簡(jiǎn)單來(lái)說(shuō)就是React管理了它的value颜阐，而非約束性組件的value則是由原生的DOM管理平窘。
所以在寫(xiě)法上區(qū)別很大：
非約束性組件寫(xiě)法：
defaultValue 中就是原生DOM中的value屬性，非約束性組件中的value值就是用戶輸入的內(nèi)容凳怨，React完全不管理輸入的過(guò)程瑰艘。
約束性組件寫(xiě)法：
約束性組件中的value值不再是一個(gè)寫(xiě)死的值，而是寫(xiě)在 state 中肤舞，由 this.handleChange 負(fù)責(zé)管理紫新。
在 handleChange 中可以重新渲染 state 的值，同時(shí)也可以對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn)李剖。
2芒率、fetch 數(shù)據(jù)請(qǐng)求
當(dāng)我們拿到用戶名和密碼時(shí)，需要將數(shù)據(jù)提交給服務(wù)器端并得到返回值篙顺。fetch 傳參數(shù)必須要是 formData偶芍，就是這個(gè)折磨了我好久。
let url = ".................................";//接口地址
let formData = new FormData();
formData.append('c','login');
formData.append('username', this.state.userName);
formData.append('password', this.state.passWord);
formData.append('client', 'android');
fetch(url,{
method: 'post',
body: formData,
}).then(function (res) {
return res.json();
}).then(function (json) {
if (json.code == "200") {
console.log("232323233-----正確")
}else if (json.code == "400") {
console.log("2323232323------錯(cuò)了～")
}
})
終于完成簡(jiǎn)易的登錄功能了德玫。
