国内网站免备案,iis本地网站,源码搭建app教程,莞城网站推广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;考虑样…formiojs 是一个开源的在线表单设计工具今天看看怎样在 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另外考虑样式等问题还安装了下面几个依赖包
npm install bootstrap
npm install react18-json-view
npm install react-bootstrap
npm install font-awesome创建组件
这里创建一个简单的页面组件主要包括三部分第一部分是表单设计器第二部分是表单预览第三部分是表单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 (ContainerRowCol Accordion defaultActiveKey0Accordion.Item eventKey0Accordion.HeaderBuilder/Accordion.HeaderAccordion.BodyFormBuilder form{jsonSchema} onChange{onFormChange} //Accordion.Body/Accordion.Item/Accordion/Col/RowRowCol Accordion defaultActiveKey0Accordion.Item eventKey0Accordion.HeaderForm/Accordion.HeaderAccordion.BodyForm form{jsonSchema} onSubmit{handleSubmit} //Accordion.Body/Accordion.Item/Accordion/Col/RowRowCol Accordion defaultActiveKey0Accordion.Item eventKey0Accordion.HeaderJSON Schema/Accordion.HeaderAccordion.BodyReactJson src{jsonSchema} name{null} collapsed{true}/ReactJson/Accordion.Body/Accordion.Item/Accordion/Col/Row/Container/);
};export default MyBuilder;导入并渲染自定义组建
修改 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 classNameAppMyBuilder //div);
}export default App;启动应用
npm start访问应用
访问 http://localhost:3000/ 即可看到效果。可以在页面的表单设计中拖动组件然后在表单预览中查看效果。
参考 https://github.com/formio/react https://formio.github.io/react-app-starterkit/#/
