Optimajet Form Builder
轻量级、基于 React、拖放、可定制、JavaScript
Form Builder是一个轻量级的、基于 React 的 Web 工具，可以集成到任何 Web 应用程序中。 这使用户能够快速轻松地创建和设计表单，而无需编程或编码技能。
Form Builder允许用户将各种表单元素（例如文本框、下拉列表、复选框、单选按钮和日期选择器）拖放到画布上以创建表单。
在本节中，我们将讨论如何创建自己的 React 组件并将其连接到 FormBuilder 和应用程序。 组件代码示例已上传到 GitHub。 让我们逐步研究这个示例。
步骤1.创建React组件
首先让我们编写我们需要的任何 React 组件。 在我们的示例中，我们使用计数器组件，该组件显示表单数据值并包含两个按钮 - 将值增加 1 和将值减少 1。
步骤 2. 创建用于编辑组件属性的表单
正如我们之前讨论的，用于编辑组件属性的表单是为表单生成器中的每个组件绘制的。 我们需要创建一个组件，它将在此表单中绘制“常规”选项卡，并返回“事件”选项卡的事件列表。 它的代码也非常简单，你可以在下面或在 GitHub 上查看。
步骤3.创建组件渲染器函数
Renderer 函数对于我们的 Form Builder 组件在表单中渲染组件是必需的。 它位于 GitHub 上。 该函数解决了重要问题：
假设应用程序中只有一个自定义组件渲染器函数，您只需在添加新的自定义组件时更改它即可。
步骤 4. 为表单构建器创建自定义 React 组件列表
现在您需要创建自定义组件的列表，以便表单生成器可以在组件面板中绘制它。 它位于 GitHub 上。 只能有一个这样的列表，所有其他自定义组件都应添加到其中。
步骤5.将组件直接连接到每个组件
我们必须将渲染器函数和自定义组件列表传输到 React 组件中。
步骤 6. 将组件全局连接到应用程序（可选）
我们经常需要根据数据动态改变表单中的组件状态。让我们举几个例子。
您可以在应用程序中执行自适应布局。当同一个表单在宽屏（电脑屏幕宽度>=998px）和移动设备（智能手机屏幕宽度<998px）的不同设备上看起来不一样时。该功能由两个工具支持：
FromBuilder支持模板。为了连接模板，您需要设置templates属性和getFormFunc回调函数。