Optimajet Form Builder
輕量級(jí) 、基於(yú) React、拖放 、可定制、JavaScript
Form Builder是一個輕量級的、基於(yú) React 的 Web 工具，可以集成到任何 Web 應用程序中。 這使用戶能夠快速輕松地創建和設計表單 ，而無需編(biān)程或編(biān)碼技能 。
Form Builder允許用戶将各種表單(dān)元素（例如文本框、下拉列表、複選框、單(dān)選按鈕和日期選擇器）拖放到畫布上以創(chuàng)建表單(dān)。
在本節中，我們将讨論如何創建自己的 React 組件並(bìng)将其連接到 FormBuilder 和應用程序 。 組件代碼示例已上傳(chuán)到 GitHub。 讓我們逐步研究這個示例。
步驟1.創建React組件
首先讓我們編(biān)寫我們需要的任何 React 組件。 在我們的示例中，我們使用計數器組件，該組件顯示表單數據值並(bìng)包含兩個按鈕 - 将值增加 1 和将值減少 1。
步驟 2. 創建用於編輯組件屬性的表單
正如我們之前讨論的 ，用於(yú)編輯組件屬性的表單是爲表單生成器中的每個組件繪制的 。 我們需要創建一個組件，它将在此表單中繪制“常規”選項卡，並(bìng)返回“事件”選項卡的事件列表。 它的代碼也非常簡單，你可以在下面或在 GitHub 上查看 。
步驟3.創建組件渲染器函數
Renderer 函數對於(yú)我們的 Form Builder 組件在表單中渲染組件是必需的。 它位於(yú) GitHub 上。 該函數解決瞭(le)重要問題：
假設(shè)應用程序中隻有一個(gè)自定義組件渲染器函數，您隻需在添加新的自定義組件時更改它即可 。
步驟 4. 爲表單構建器創建自定義 React 組件列表
現在您需要創(chuàng)建自定義組件的列表，以便表單生成器可以在組件面闆中繪制它 。 它位於(yú) GitHub 上。 隻能有一個這樣的列表，所有其他自定義組件都應添加到其中。
步驟5.将組件直接連接到每個組件
我們(men)必須将渲染器函數和自定義組件列表傳(chuán)輸到 React 組件中 。
步驟 6. 将組件全局連接到應用程序（可選）
我們經常需要根據數據動态改變(biàn)表單(dān)中的組件狀态 。讓我們舉幾個例子。
您可以在應用程序中執行自适應布局。當同一個表單(dān)在寬屏（電腦屏幕寬度>=998px）和移動設備(bèi)（智能手機屏幕寬度<998px）的不同設備(bèi)上看起來不一樣時。該功能由兩個工具支持 ：
FromBuilder支持模闆。爲瞭(le)連接模闆，您需要設置templates屬性和getFormFunc回調(diào)函數。
