如何用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://myzitong.com/article/dpsjec.html