代码拉取完成,页面将自动刷新
A complete react form builder that interfaces with a json endpoint to load and save generated forms.
var React = require('react');
var FormBuilder = require('react-forms-builder');
React.render(
<FormBuilder.ReactFormBuilder />,
document.body
)
Toolbar._defaultItems
var items = [{
key: 'Header',
name: 'Header Text',
icon: 'fa fa-header',
static: true,
content: 'Placeholder Text...'
},
{
key: 'Paragraph',
name: 'Paragraph',
static: true,
icon: 'fa fa-paragraph',
content: 'Placeholder Text...'
}];
<FormBuilder.ReactFormBuilder
url='path/to/GET/initial.json'
toolbarItems={items}
saveUrl='path/to/POST/built/form.json' />
Now that a form is built and saved, let's generate it from the saved json.
var React = require('react');
var FormBuilder = require('react-forms-builder');
React.render(
<FormBuilder.ReactFormGenerator
form_action="/path/to/form/submit"
form_method="POST"
task_id={12} // Used to submit a hidden variable with the id to the form from the database.
answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values.
authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form.
data={JSON_QUESTION_DATA} // Question data
/>,
document.body
)
Name | Type | Required? | Description |
---|---|---|---|
form_action | string | Required | URL path to submit the form |
form_method | string | Required | Verb used in the form submission. |
action_name | string | Optional | Defines form submit button text. Defaults to "Submit" |
data | array | Required | Question data retrieved from the database |
download_path | string | Optional | used in File Download |
upload_path | string | Optional | used in File Upload |
back_action | string | Optional | URL path to go back if needed. |
back_name | string | Optional | Button text for back action. Defaults to "Cancel". |
task_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database. |
answer_data | array | Optional | Answer data, only used if loading a pre-existing form with values. |
authenticity_token | string | Optional | If using Rails and need an auth token to submit form. |
hide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true. |
display_short | boolean | Optional | Display an optional "shorter page/form" which is common for legal documents or situations where the user will just have to sign or fill out a shorter form with only the critical elements. |
read_only | boolean | Optional | Shows a read only version which has fields disabled and removes "required" labels. |
variables | object | Optional | Key/value object that can be used for Signature variable replacement. |
Name | Type | Required? | Description |
---|
In order to make the form builder look pretty, there are a few dependencies other than React. See the example code in index.html for more details.
All relevant styles are located in css/application.css.scss.
$ npm install
$ npm start
$ npm serve:api
Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。