如何用RxJS實(shí)現(xiàn)ReduxForm-創(chuàng)新互聯(lián)

寫在前面的話

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

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

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

背景

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

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

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

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

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

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

HTML Form

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

保存表單狀態(tài)

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

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

主要有以下幾種方法:

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

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

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

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

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

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

廣告

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