如何用RxJS实现ReduxForm-创新互联

写在前面的话

看这篇文章之前，你需要掌握的知识:

创新互联是一家专注于成都网站制作、网站设计和雅安机房托管的网络公司，有着丰富的建站经验和案例。

• 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 会返回所有
  表单节点。
• 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-创新互联
浏览路径：http://mswzjz.cn/article/dpsjec.html