node 获取表单数据为空_像声明类型一样写表单—

从最简单的开始实现，先看一个最简单的场景

先实现这一部分。

首先，我们要遵循一个基本原则，尽量写视图无关的代码。

所以我们把整套代码分成两部分：

Core：核心部分，没有任何 React 相关代码的数据管理部分。
React：视图绑定部分，把核心部分跟 React 绑定起来。

我们应该实现以下的基本功能：

数据根据 key 的订阅和更新。
数据自动绑定。
数据的自动传递。

其中第一点是跟视图无关的，写到 Core，第二三点和视图相关，写到 React 中。

关于数据管理，我们选择数据集中管理，然后分开订阅更新。

通过一个 Root 节点来集中管理数据，然后从 Root 节点分岔出子节点，每个子节点控制该部分数据的订阅更新。

根据这个设计，我们能得到这样的接口：

Root 可以通过 byPath 分岔出 Node。

Node 可以更新、订阅、获取值。

实现如下：

实现不重要，稍微看看就行了。

现在 Core 部分就写好了。

实际上现在已经勉强能用了，只是不方便，写起来是这样：

页面上效果是这样的：

这样光溜溜的用起来是很不方便的，所以需要写一些组件来让 Core 和视图框架 React 做适配。

把 Core 绑定到 React 上。

React 部分需要实现以下功能：

通过 Context 传递 Core。
一个提供 Root 的组件。
给表单控件绑定值。

一共分成 2 个组件和一些工具函数：

Container 组件负责 new FormCoreRoot。
FieldWrapper 组件负责 byPath 并绑定值。
写一个 useValue 的 hooks 方便订阅。

实现如下

现在就可以这么写了

看上去 Container 还缺一个 onChange 来获取整个表单的数据。

给 Core 添加一个参数，Container 透传下去就好了。

更新的时候调用 onChange。

实际效果如下

目前最简单的场景就解决了。

下一篇将实现嵌套型表单。

代码仓库github.com

node 获取表单数据为空_像声明类型一样写表单——基础功能相关推荐

node 获取表单数据为空_数据结构与算法(python)单向链表篇
链表数据表的构建需要预先知道数据的大小来申请连续的存储空间, 而在进行扩充的时候又需要进行数据的搬迁, 使用起来不是很灵活. 链表结构可以充分利用计算机内存空间, 实现灵活的内存动态管理. 简单来说 ...
node 获取表单数据为空_程序员：数据结构和算法，中序线索化二叉树
1.中序线索化二叉树创建如上的二叉树,线索化二叉树时,根据指定的遍历方式得到的节点的访问顺序,一个节点前面的节点,叫做前驱节点,一个节点后面的节点,叫做后继节点. 线索化二叉树的规则: ...
node 获取表单数据为空_数据结构与算法(python)单向循环链表
单向循环链表单链表的一个变形是单向循环链表, 链表的最后一个节点的next域不再为None, 而是指向链表的头节点. 单向循环链表如图所示: 单向循环链表同样单向循环链表也是要使用python来对 ...
node 获取表单数据为空_寻offer之JS数据结构与算法 -- 栈
栈栈是一个线性结构,在计算机中是一种相当常见的数据结构. 栈与数组对比我们知道数组是一种线性结构,并且可以在数组的任意位置插入和删除数据.但是有时候,我们为了实现某些功能,必须对这种任意性加以限制 ...
提交表单数据到数据库_普通表单不仅适用于数据库
提交表单数据到数据库您也可以将类似的规则应用于数据对象类型. (You can apply similar rules to data object types, too.) You probabl ...
linux如何把mysql表名换成小写_让 MySQL 在 Linux 下表名不区分大小写(实为表名全小写)...
把 Windows 下的应用部署到 Linux 下,使用到了 Quartz 集群的特性,所以建了 MySql 的中间表,一启动看到报错: Invocation of init method faile ...
单列表_使用Excel中的quot;记录单quot;功能快速录入数据
在Excel中进行数据录入的时候,平常都是一行一行地录入数据,但是有时候在单元格之间,行与行,列与列之间频繁地切换去录入数据,费事费力还容易出错. 今天给你推荐一个既好用又有效率的Excel中的隐藏功 ...
node 获取表单数据为空_Java实现数据结构之【链表】
链表相比于前几个章节讲的数据结构而言,是一个真正的动态数据结构也是一个最简单的动态数据结构,我们在后面还会接触更多的动态数据结构,所以对链表有一个理解非常好的基础,就能够更加容易的学习后面更加复杂的数 ...
python获取表单数据的代码_使用flask和python从html表单获取表单数据
我正在尝试在按下submit时从文本字段中获取表单数据,以便将其放入json格式并作为另一个页面访问json数据,该页面将是localhost:5000/info.每次我试图用request.form ...

node 获取表单数据为空_像声明类型一样写表单——基础功能

node 获取表单数据为空_像声明类型一样写表单——基础功能相关推荐

最新文章

热门文章

node 获取表单数据 为空_像声明类型一样写表单——基础功能

node 获取表单数据 为空_像声明类型一样写表单——基础功能相关推荐

最新文章

热门文章

node 获取表单数据为空_像声明类型一样写表单——基础功能

node 获取表单数据为空_像声明类型一样写表单——基础功能相关推荐