簡體   English   中英

我如何在 react js 項目中使用 react form builder 2

[英]how can i use react form builder 2 in react js project

我一直在嘗試為我的項目使用react form builder 2,但我不明白如何要求它,然后通過它顯示表單任何人都可以幫助我是react js的新手,過去我只是在安裝后導入庫但是在這種情況下,我沒有要導入的標簽,我發現很難使用它。?

basic usage
var React = require('react');
var FormBuilder = require('react-form-builder2');

React.render(
  <FormBuilder.ReactFormBuilder />,
  document.body
)
Props
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' />
React Form Generator
Now that a form is built and saved, let's generate it from the saved json.

var React = require('react');
var FormBuilder = require('react-form-builder2');

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
)

嘗試使用https://github.com/rjsf-team/react-jsonschema-form可以選擇 output 的設計。 如果您需要可視化構建器,可以使用我的項目https://github.com/MedinaGitHub/react-jsonschema-form-builder

您應該將引導程序和字體真棒樣式表添加到 index.html https://github.com/Kiho/react-form-b uilder/blob/master/public/index.html#L5

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM