寫在前面的話

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

創新互聯是一家專注于成都網站制作、網站設計和雅安機房托管的網絡公司，有著豐富的建站經驗和案例。

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

背景

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

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

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

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

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

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

HTML Form

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

保存表單狀態

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

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

主要有以下幾種方法:

• document.forms 會返回所有 <form> 表單節點。
• 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實現ReduxForm-創新互聯
分享URL：http://www.yijiale78.com/article42/dpsjec.html

成都網站建設公司_創新互聯，為您提供微信小程序、手機網站建設、搜索引擎優化、網站收錄、定制開發、品牌網站建設

廣告

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