react 之 fetch 登錄請(qǐng)求formData提交參數(shù)

買(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ě)法:

圖片.png

defaultValue 中就是原生DOM中的value屬性,非約束性組件中的value值就是用戶輸入的內(nèi)容凳怨,React完全不管理輸入的過(guò)程瑰艘。

約束性組件寫(xiě)法:

圖片.png

約束性組件中的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)易的登錄功能了德玫。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末匪蟀,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子宰僧,更是在濱河造成了極大的恐慌材彪,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異查刻,居然都是意外死亡键兜,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)穗泵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)普气,“玉大人,你說(shuō)我怎么就攤上這事佃延∠志鳎” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵履肃,是天一觀的道長(zhǎng)仔沿。 經(jīng)常有香客問(wèn)我,道長(zhǎng)尺棋,這世上最難降的妖魔是什么封锉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮膘螟,結(jié)果婚禮上成福,老公的妹妹穿的比我還像新娘。我一直安慰自己荆残,他們只是感情好奴艾,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著内斯,像睡著了一般蕴潦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俘闯,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天潭苞,我揣著相機(jī)與錄音,去河邊找鬼备徐。 笑死萄传,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蜜猾。 我是一名探鬼主播秀菱,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蹭睡!你這毒婦竟也來(lái)了衍菱?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤肩豁,失蹤者是張志新(化名)和其女友劉穎脊串,沒(méi)想到半個(gè)月后辫呻,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡琼锋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年放闺,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缕坎。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡怖侦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出谜叹,到底是詐尸還是另有隱情匾寝,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布荷腊,位于F島的核電站艳悔,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏女仰。R本人自食惡果不足惜猜年,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望董栽。 院中可真熱鬧码倦,春花似錦、人聲如沸锭碳。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)擒抛。三九已至,卻和暖如春补疑,著一層夾襖步出監(jiān)牢的瞬間歧沪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工莲组, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诊胞,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓锹杈,卻偏偏與公主長(zhǎng)得像撵孤,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子竭望,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理邪码,服務(wù)發(fā)現(xiàn),斷路器咬清,智...
    卡卡羅2017閱讀 134,716評(píng)論 18 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,328評(píng)論 25 707
  • 原教程內(nèi)容詳見(jiàn)精益 React 學(xué)習(xí)指南闭专,這只是我在學(xué)習(xí)過(guò)程中的一些閱讀筆記奴潘,個(gè)人覺(jué)得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,843評(píng)論 1 18
  • 本筆記基于React官方文檔影钉,當(dāng)前React版本號(hào)為15.4.0画髓。 1. 安裝 1.1 嘗試 開(kāi)始之前可以先去co...
    Awey閱讀 7,729評(píng)論 14 128
  • 去年的夏天,我們家門(mén)前平委,就有一盆很漂亮的茉莉花雀扶,可是,到冬天的時(shí)候肆汹,它的葉子卷起來(lái)了愚墓,花枯萎...
    楊樊金諾閱讀 422評(píng)論 1 1