寫在前面的話

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

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

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

背景

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

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

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

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

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

正因為以上這些特點，使 form 的開發(fā)變得困難重重。在接下來的章節(jié)中，我們會將 RxJS 和 Form 結合起來，幫助我們更好的去解決這些問題。

HTML Form

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

保存表單狀態(tài)

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

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

主要有以下幾種方法:

• document.forms 會返回所有 <form> 表單節(jié)點。
• 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實現(xiàn)ReduxForm-創(chuàng)新互聯(lián)
分享URL：http://www.rwnh.cn/article42/dpsjec.html

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

廣告

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