Optimajet Form Builder

輕量級、基于 React、拖放、可定制、JavaScript

 

Form Builder是一個輕量級的、基于 React 的 Web 工具，可以集成到任何 Web 應(yīng)用程序中。 這使用戶能夠快速輕松地創(chuàng)建和設(shè)計表單，而無需編程或編碼技能。

 

Form Builder允許用戶將各種表單元素（例如文本框、下拉列表、復(fù)選框、單選按鈕和日期選擇器）拖放到畫布上以創(chuàng)建表單。

 

功能

自定義 React 組件

在本節(jié)中，我們將討論如何創(chuàng)建自己的 React 組件并將其連接到 FormBuilder 和應(yīng)用程序。 組件代碼示例已上傳到 GitHub。 讓我們逐步研究這個示例。

步驟1.創(chuàng)建React組件

首先讓我們編寫我們需要的任何 React 組件。 在我們的示例中，我們使用計數(shù)器組件，該組件顯示表單數(shù)據(jù)值并包含兩個按鈕 - 將值增加 1 和將值減少 1。

步驟 2. 創(chuàng)建用于編輯組件屬性的表單

正如我們之前討論的，用于編輯組件屬性的表單是為表單生成器中的每個組件繪制的。 我們需要創(chuàng)建一個組件，它將在此表單中繪制“常規(guī)”選項卡，并返回“事件”選項卡的事件列表。 它的代碼也非常簡單，你可以在下面或在 GitHub 上查看。

步驟3.創(chuàng)建組件渲染器函數(shù)

Renderer 函數(shù)對于我們的 Form Builder 組件在表單中渲染組件是必需的。 它位于 GitHub 上。 該函數(shù)解決了重要問題：

• 它使許多Form Builder參數(shù)適應(yīng)我們手動編寫的組件的屬性。
• 渲染一個組件。

假設(shè)應(yīng)用程序中只有一個自定義組件渲染器函數(shù)，您只需在添加新的自定義組件時更改它即可。

步驟 4. 為表單構(gòu)建器創(chuàng)建自定義 React 組件列表

現(xiàn)在您需要創(chuàng)建自定義組件的列表，以便表單生成器可以在組件面板中繪制它。 它位于 GitHub 上。 只能有一個這樣的列表，所有其他自定義組件都應(yīng)添加到其中。

步驟5.將組件直接連接到每個組件

我們必須將渲染器函數(shù)和自定義組件列表傳輸?shù)?React 組件中。

步驟 6. 將組件全局連接到應(yīng)用程序（可選）

 

替換表達式和數(shù)據(jù)綁定

我們經(jīng)常需要根據(jù)數(shù)據(jù)動態(tài)改變表單中的組件狀態(tài)。讓我們舉幾個例子。

• 當(dāng)改變文檔頁邊距時，表單頁眉會動態(tài)改變。
• 相關(guān)控件（例如字典）。如果您在第一個字典中選擇了一個值，那么第二個字典中的選擇列表將自動受到限制。
• 您必須在每個集合編輯器或中繼器組件項中添加按鈕（或鏈接），點擊后您將轉(zhuǎn)到實體編輯表單。

 

自適應(yīng)布局

您可以在應(yīng)用程序中執(zhí)行自適應(yīng)布局。當(dāng)同一個表單在寬屏（電腦屏幕寬度>=998px）和移動設(shè)備（智能手機屏幕寬度<998px）的不同設(shè)備上看起來不一樣時。該功能由兩個工具支持：

• 僅在移動布局中編寫附加樣式。
• 為組件指定渲染模式（移動或桌面）。

 

模板

FromBuilder支持模板。為了連接模板，您需要設(shè)置templates屬性和getFormFunc回調(diào)函數(shù)。