当前位置: 首页 > news >正文

使用formio和react实现在线表单设计

formiojs 是一个开源的在线表单设计工具,今天看看怎样在 react js 中使用 formiojs。

  1. 首先创建一个react工程
npx create-react-app my-react-formio-app
  1. 安装依赖
cd my-react-formio-app
npm install @formio/react
npm install @formio/js

另外,考虑样式等问题,还安装了下面几个依赖包

npm install bootstrap 
npm install react18-json-view
npm install react-bootstrap
npm install font-awesome
  1. 创建组件

这里创建一个简单的页面组件,主要包括三部分,第一部分是表单设计器,第二部分是表单预览,第三部分是表单JSON数据。

在 src 下创建文件 MyBuilder.js,内容如下:

import { FormBuilder, Form } from "@formio/react";
import { useState } from "react";
import ReactJson from "react18-json-view";
import { Container, Row, Col, Button, Accordion } from "react-bootstrap";const MyBuilder = () => {const [jsonSchema, setSchema] = useState({ components: [] });const onFormChange = (schema) => {setSchema({ ...schema, components: [...schema.components] });};const handleSubmit = (data) => {console.log(data);}return (<><Container><Row><Col ><Accordion defaultActiveKey="0"><Accordion.Item eventKey="0"><Accordion.Header>Builder</Accordion.Header><Accordion.Body><FormBuilder form={jsonSchema} onChange={onFormChange} /></Accordion.Body></Accordion.Item></Accordion></Col></Row><Row><Col ><Accordion defaultActiveKey="0"><Accordion.Item eventKey="0"><Accordion.Header>Form</Accordion.Header><Accordion.Body><Form form={jsonSchema} onSubmit={handleSubmit} /></Accordion.Body></Accordion.Item></Accordion></Col></Row><Row><Col ><Accordion defaultActiveKey="0"><Accordion.Item eventKey="0"><Accordion.Header>JSON Schema</Accordion.Header><Accordion.Body><ReactJson src={jsonSchema} name={null} collapsed={true}></ReactJson></Accordion.Body></Accordion.Item></Accordion></Col></Row></Container></>);
};export default MyBuilder;
  1. 导入并渲染自定义组建

修改 src/App.js 文件,内容如下:

import React from 'react';
import MyBuilder from './MyBuilder';import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@formio/js/dist/formio.full.min.css';
import './App.css';function App() {return (<div className="App"><MyBuilder /></div>);
}export default App;
  1. 启动应用
npm start
  1. 访问应用

访问 http://localhost:3000/ 即可看到效果。可以在页面的表单设计中拖动组件,然后在表单预览中查看效果。

参考:
https://github.com/formio/react
https://formio.github.io/react-app-starterkit/#/

相关文章:

使用formio和react实现在线表单设计

formiojs 是一个开源的在线表单设计工具&#xff0c;今天看看怎样在 react js 中使用 formiojs。 首先创建一个react工程 npx create-react-app my-react-formio-app安装依赖 cd my-react-formio-app npm install formio/react npm install formio/js另外&#xff0c;考虑样…...

MySQL 基础使用

文章目录 一、Navicat 工具链接 Mysql二、数据库的使用1.常用数据类型2. 建表 create3. 删表 drop4. insert 插入数据5. select 查询数据6. update 修改数据7. delete 删除记录truncate table 删除数据 三、字段约束字段1. 主键 自增delete和truncate自增长字段的影响 2. 非空…...

✌粤嵌—2024/4/3—合并K个升序链表✌

代码实现&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* merge(struct ListNode *l1, struct ListNode *l2) {if (l1 NULL) {return l2;}if (l2 NULL) {return l1;}struct Lis…...

企业微信主体的修改方法

企业微信变更主体有什么作用&#xff1f;当我们的企业因为各种原因需要注销或已经注销&#xff0c;或者运营变更等情况&#xff0c;企业微信无法继续使用原主体继续使用时&#xff0c;可以申请企业主体变更&#xff0c;变更为新的主体。企业微信变更主体的条件有哪些&#xff1…...

C++的封装(十):数据和代码分离

封装的好处当然是非常多的。就不一一例举了。但封装也制造了访问壁垒。如果你是初学者&#xff0c;当你面对一堆封装好的C类一筹莫展&#xff0c;不知道从哪里下手时… 可以试试这个方法&#xff0c;数据和代码分离。 就是说&#xff0c;class只写方法&#xff0c;数据都放到…...

第十五届蓝桥杯大赛软件赛省赛 C/C++ 大学 B 组(基础题)

试题 C: 好数 时间限制 : 1.0s 内存限制: 256.0MB 本题总分&#xff1a;10 分 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上 的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &…...

模板的进阶

目录 非类型模板参数 C11的静态数组容器-array 按需实例化 模板的特化 函数模板特化 类模板特化 全特化与偏特化 模板的分离编译 总结 非类型模板参数 基本概念&#xff1a;模板参数类型分为类类型模板参数和非类类型模板参数 类类型模板参数&#xff1a;跟在class…...

微服务中Dubbo通俗易懂讲解及代码实现

当你在微服务架构中需要不同服务之间进行远程通信时&#xff0c;Dubbo是一个优秀的选择。Dubbo是一个高性能的Java RPC框架&#xff0c;它提供了服务注册、发现、调用、负载均衡等功能&#xff0c;使得微服务之间的通信变得简单而高效。 让我们来看一下Dubbo的通俗易懂的解释和…...

Unity HDRP Release-Notes

&#x1f308;HDRP Release-Notes 收集的最近几年 Unity各个版本中 HDRP的更新内容 信息收集来自自动搜集工具&#x1f448; &#x1f4a1;HDRP Release-Notes 2023 &#x1f4a1;HDRP Release-Notes 2022 &#x1f4a1;HDRP Release-Notes 2021...

Chrome将网页保存为PDF的实战教程

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

zotero7+Chat GPT实现ai自动阅读论文

关于这一部分的内容我在哔哩哔哩上发布了视频教程 视频链接见&#xff1a; zotero7GPT AI快速阅读文献_哔哩哔哩_bilibili 相关下载的官方链接如下&#xff1a; 1、zotero7 测试版官方下载链接&#xff1a; https://www.zotero.org/support/beta_builds 2、 InfiniCLOUD 云…...

STM32外设配置以及一些小bug总结

USART RX的DMA配置 这里以UART串口1为例&#xff0c;首先点ADD添加RX和TX配置DMA&#xff0c;然后模式一般会选择是normal&#xff0c;这个模式是当DMA的计数器减到0的时候就不做任何动作了&#xff0c;还有一种循环模式&#xff0c;是计数器减到0之后&#xff0c;计数器自动重…...

【数据结构与算法】:10道链表经典OJ

目录 1. 移除链表元素2. 反转链表2.1反转指针法2.2 头插法 3. 合并两个有序链表4. 分隔链表5. 环形链表6. 链表的中间节点7. 链表中倒数第K个节点8. 相交链表9. 环形链表的约瑟夫问题10. 链表的回文结构 1. 移除链表元素 思路1&#xff1a;遍历原链表&#xff0c;将 val 所在的…...

Python SQL解析和转换库之sqlglot使用详解

概要 Python SQLGlot是一个基于Python的SQL解析和转换库,可以帮助开发者更加灵活地处理和操作SQL语句。本文将介绍SQLGlot库的安装、特性、基本功能、高级功能、实际应用场景等方面。 安装 安装SQLGlot库非常简单,可以使用pip命令进行安装: pip install sqlglot安装完成后…...

NULL—0—nullptr 三者关系

1.概述 NULL&#xff0c;0&#xff0c;nullptr值都是0&#xff0c;但是类型不同&#xff0c;但是由于C头文件中NULL定义宏混乱&#xff0c;可能是int 0&#xff0c;也可能是(void*)0; 所以在C11及以后的标准中引入新的空指针nullptr&#xff0c;nullptr就是(void*)0&#xff…...

Nginx 请求的 匹配规则 与 转发规则

博文目录 文章目录 URL 与 URI匹配规则案例说明 转发规则响应静态资源案例说明 转发动态代理案例说明案例说明 URL 与 URI 通常, 一个 URL 由以下部分组成 scheme://host:port/path?query#fragment scheme: 协议, 如 http, https, ftp 等host; 主机名或 IP 地址post: 端口…...

OWASP发布10大开源软件风险清单

3月20日&#xff0c;xz-utils 项目被爆植入后门震惊了整个开源社区&#xff0c;2021 年 Apache Log4j 漏洞事件依旧历历在目。倘若该后门未被及时发现&#xff0c;那么将很有可能成为影响最大的软件供应链漏洞之一。近几年爆发的一系列供应链漏洞和风险&#xff0c;使得“加强开…...

大学生前端学习第一天:了解前端

引言&#xff1a; 哈喽&#xff0c;各位大学生们&#xff0c;大家好呀&#xff0c;在本篇博客&#xff0c;我们将引入一个新的板块学习&#xff0c;那就是前端&#xff0c;关于前端&#xff0c;GPT是这样描述的&#xff1a;前端通常指的是Web开发中用户界面的部分&#xff0c;…...

公安机关人民警察证照片采集规范及自拍制作电子版指南

在当今社会&#xff0c;证件照的拍摄已成为我们生活中不可或缺的一部分。无论是办理身份证、驾驶证还是护照&#xff0c;一张规范的证件照都是必需的。而对于公安机关的人民警察来说&#xff0c;证件照片的采集更是有着严格的规范和要求。本文将为您详细介绍公安机关人民警察证…...

使用Python插入100万条数据到MySQL数据库并将数据逐步写出到多个Excel

Python插入100万条数据到MySQL数据库 步骤一&#xff1a;导入所需模块和库 首先&#xff0c;我们需要导入 MySQL 连接器模块和 Faker 模块。MySQL 连接器模块用于连接到 MySQL 数据库&#xff0c;而 Faker 模块用于生成虚假数据。 import mysql.connector # 导入 MySQL 连接…...

GitHub Trending 每日精选 - 2026-03-27

GitHub Trending 每日精选 - 2026-03-27 &#x1f4c8; 今日概览 今天是 2026-03-27&#xff0c;GitHub Trending 榜单上有哪些值得关注的开源项目&#xff1f;注&#xff1a;此博客为自动化生成&#xff0c;系统会在每日运行时获取最新 Trending 数据并填充具体项目信息。&…...

s2-pro音色复用效果实测:不同参考音频时长(3s/10s/30s)对合成质量影响

s2-pro音色复用效果实测&#xff1a;不同参考音频时长&#xff08;3s/10s/30s&#xff09;对合成质量影响 1. 引言 s2-pro作为Fish Audio开源的专业级语音合成模型镜像&#xff0c;其音色复用功能在实际应用中表现如何&#xff1f;本文将针对一个关键问题展开实测&#xff1a…...

[工业级协议]开发指南:从协议兼容性到实时通信的5步解决方案

[工业级协议]开发指南&#xff1a;从协议兼容性到实时通信的5步解决方案 【免费下载链接】libiec61850 Official repository for libIEC61850, the open-source library for the IEC 61850 protocols 项目地址: https://gitcode.com/gh_mirrors/li/libiec61850 副标题&a…...

矩阵按键的硬件设计与软件扫描实战

1. 矩阵按键的硬件设计要点 第一次接触矩阵按键时&#xff0c;我完全被它节省IO口的设计惊艳到了。想象一下&#xff0c;16个独立按键原本需要16个IO口&#xff0c;而4x4矩阵按键只需要8个IO口就能搞定。这种设计在资源受限的单片机项目中简直就是救命稻草。 硬件连接上有个容易…...

24/7运行指南:OpenClaw+GLM-4-7-Flash树莓派部署与看门狗配置

24/7运行指南&#xff1a;OpenClawGLM-4-7-Flash树莓派部署与看门狗配置 1. 为什么选择树莓派作为OpenClaw的宿主设备&#xff1f; 去年冬天&#xff0c;当我第一次尝试让OpenClaw在我的主力开发机上24小时运行时&#xff0c;遭遇了严重的资源冲突问题。半夜运行的自动化任务…...

FireRedASR Pro模型架构浅析:从卷积神经网络到端到端设计

FireRedASR Pro模型架构浅析&#xff1a;从卷积神经网络到端到端设计 最近在语音识别圈子里&#xff0c;FireRedASR Pro这个名字被提到的次数越来越多了。不少朋友都在问&#xff0c;这个模型到底有什么特别之处&#xff0c;为什么大家都在讨论它。其实&#xff0c;它的核心魅…...

leetcode 困难题 1505. 最多 K 次交换相邻数位后得到的最小整数

Problem: 1505. 最多 K 次交换相邻数位后得到的最小整数 从左到右遍历字符串的每个索引&#xff0c;对每个索引i&#xff0c;向后查找k窗口内的最小数字&#xff0c;右边界是min(n, ik1)&#xff0c;删去这个最小数字&#xff0c;然后将这个最小数字插入到当前索引&#xff0c;…...

从4G到RedCap:手把手教你升级老旧工业设备的无线通信模块(附功耗测试数据)

从4G到RedCap&#xff1a;工业设备无线通信模块升级实战指南 在工业物联网快速发展的今天&#xff0c;老旧设备的通信模块升级成为许多工厂面临的现实挑战。传统4G模块虽然稳定可靠&#xff0c;但面对5G时代RedCap技术带来的低功耗、低成本优势&#xff0c;升级改造已成为提升设…...

新手也能懂的RAIM算法:用Python复现GNSS完好性监测(附代码与数据)

新手也能懂的RAIM算法&#xff1a;用Python复现GNSS完好性监测&#xff08;附代码与数据&#xff09; 当你用手机导航时&#xff0c;是否想过这些定位信号有多可靠&#xff1f;RAIM&#xff08;Receiver Autonomous Integrity Monitoring&#xff09;算法就像GNSS系统的"质…...

OpenClaw任务编排:用Qwen3.5-4B-Claude实现爬虫+分析闭环

OpenClaw任务编排&#xff1a;用Qwen3.5-4B-Claude实现爬虫分析闭环 1. 为什么需要自动化任务编排 去年我接手了一个市场调研项目&#xff0c;需要每周从20多个网站抓取产品价格数据&#xff0c;清洗后生成趋势图表。最初用Python脚本手动Excel处理&#xff0c;每次要花3小时…...