從最簡單的開始實現，先看一個最簡單的場景

先實現這一部分。

首先，我們要遵循一個基本原則，盡量寫視圖無關的代碼。

所以我們把整套代碼分成兩部分：

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 获取表单数据 为空_像声明类型一样写表单——基础功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。