寫(xiě)在前面的話(huà)

看這篇文章之前，你需要掌握的知識(shí):

創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)和雅安機(jī)房托管的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗(yàn)和案例。

• React
• RxJS (至少需要知道 Subject 是什么)

背景

form 可以說(shuō)是 web 開(kāi)發(fā)中的大的難題之一。跟普通的組件相比，form 具有以下幾個(gè)特點(diǎn):

1、更多的用戶(hù)交互。
這意味著可能需要大量的自定義組件，比如 DataPicker，Upload，AutoComplete 等等。

3、頻繁的狀態(tài)改變。
每當(dāng)用戶(hù)輸入一個(gè)值，都可能會(huì)對(duì)應(yīng)用狀態(tài)造成改變，從而需要更新表單元素或者顯示錯(cuò)誤信息。

3、表單校驗(yàn)，也就是對(duì)用戶(hù)輸入數(shù)據(jù)的有效性進(jìn)行驗(yàn)證。
表單驗(yàn)證的形式也很多，比如邊輸入邊驗(yàn)證，失去焦點(diǎn)后驗(yàn)證，或者在提交表單之前驗(yàn)證等等。

4、異步網(wǎng)絡(luò)通信。
當(dāng)用戶(hù)輸入和異步網(wǎng)絡(luò)通信同時(shí)存在時(shí)，需要考慮的東西就更多了。就比如 AutoComplete，需要根據(jù)用戶(hù)的輸入去異步獲取相應(yīng)的數(shù)據(jù)，如果用戶(hù)每輸入一次就發(fā)起一次請(qǐng)求，會(huì)對(duì)資源造成很大浪費(fèi)。因?yàn)槊恳淮屋斎攵际?code>異步獲取數(shù)據(jù)的，那么連續(xù)兩次用戶(hù)輸入拿到的數(shù)據(jù)也有可能存在 "后發(fā)先至" 的問(wèn)題。

正因?yàn)橐陨线@些特點(diǎn)，使 form 的開(kāi)發(fā)變得困難重重。在接下來(lái)的章節(jié)中，我們會(huì)將 RxJS 和 Form 結(jié)合起來(lái)，幫助我們更好的去解決這些問(wèn)題。

HTML Form

在實(shí)現(xiàn)我們自己的 Form 組件之前，讓我們先來(lái)參考一下原生的 HTML Form。

保存表單狀態(tài)

對(duì)于一個(gè) Form 組件來(lái)說(shuō)，需要保存所有表單元素的信息(如 value, validity 等)，HTML Form 也不例外。

那么，HTML Form 將表單狀態(tài)保存在什么地方？如何才能獲取表單元素信息？

主要有以下幾種方法:

• document.forms 會(huì)返回所有 <form> 表單節(jié)點(diǎn)。
• HTMLFormElement.elements 返回所有表單元素。
• event.target.elements 也能獲取所有表單元素。

document.forms[0].elements[0].value; // 獲取第一個(gè) form 中第一個(gè)表單元素的值

const form = document.querySelector("form");
form.elements[0].value; 

form.addEventListener('submit', function(event) {
 console.log(event.target.elements[0].value);
});

分享名稱(chēng)：如何用RxJS實(shí)現(xiàn)ReduxForm-創(chuàng)新互聯(lián)
分享URL：http://jinyejixie.com/article42/dpsjec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、手機(jī)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站收錄、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)