@@ -58,7 +58,7 @@ npm i scalable-form-antd -S
5858```
5959
6060使用scalable-form-antd,我们需要针对表单需求写一下表单描述(schema),并且将schema作为scalable-form-antd的props传入。
61- > 写这个schema会很繁琐 ,不过放心,Scalable Form的一大创新就是支持使用可视化的编排组件 [ scalable-form-editor] ( https://www.npmjs.com/package/scalable-form-editor ) 来搭建生成这个schema,下文中,您会了解如何使用这个editor。
61+ > 您可能觉得写这个schema很繁琐 ,不过放心,Scalable Form的一大创新就是支持使用可视化的编排组件 [ scalable-form-editor] ( https://www.npmjs.com/package/scalable-form-editor ) 来搭建生成这个schema,完全不需要您手动书写 ,下文中,您会了解如何使用这个editor。
6262
6363``` jsx harmony
6464import React from " react" ;
@@ -102,13 +102,15 @@ export default class FormExample extends React.PureComponent {
102102 };
103103 }
104104
105+ // 用户输入表单数据变化时的回调,会返回用户当前填写的表单数据formData
105106 handleChanged = (formData ) => {
106107 console .log (" ScalableForm Changed!" , formData);
107108 this .setState ({
108109 formData: { ... formData }
109110 });
110111 };
111112
113+ // 用户点击提交时的回调,会返回用户填写的表单数据formData
112114 handleSubmit = (formData ) => {
113115 console .log (" ScalableForm Submitted!" , formData);
114116 };
@@ -119,7 +121,7 @@ export default class FormExample extends React.PureComponent {
119121 < ScalableForm
120122 jsonSchema= {this .jsonSchema }
121123 uiSchema= {this .uiSchema }
122- formData= {this .state .formData } // formData是用户表单中实际填写的字段数据
124+ formData= {this .state .formData }
123125 onChange= {this .handleChanged }
124126 onSubmit= {this .handleSubmit }
125127 / >
@@ -132,10 +134,12 @@ export default class FormExample extends React.PureComponent {
132134您可以在 [ codesandbox] ( https://codesandbox.io/s/late-bird-xform-antd-x6qoo?from-embed ) 查看这个例子的演示。<br />
133135您可以访问访问[ scalable-form-antd文档] ( https://scalable-form-platform.github.io/#/zh/scalable_form_antd ) 了解更多信息
134136
135- <img src =" https://img.alicdn.com/tfs/TB1dJ9Uz1H2gK0jSZFEXXcqMpXa-803-559 .png " style = " width : 400 px ; margin-top : 20 px ; /* float: right; */ /* padding-left: 20px; */ display : block ; margin-left : auto ; margin-right : auto ; " />
137+ <img src =" https://img.alicdn.com/tfs/TB1kDsPAeH2gK0jSZJnXXaT1FXa-2554-696 .png " />
136138
137139> 您也可以使用[ scalable-form-antd-mobile] ( https://www.npmjs.com/package/scalable-form-antd-mobile ) 在移动端渲染表单,[ 点击这里] ( https://codesandbox.io/s/late-bird-xform-antd-mobile-qspcg ) 在codesandbox中查看移动端渲染表单的例子,您也可以[ 在这里] ( https://scalable-form-platform.github.io/#/zh/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%B8%B2%E6%9F%93 ) 查看更多scalable-form-antd-mobile的文档。
138140
141+
142+
139143### 使用scalable-form-editor可视化编排表单
140144``` bash
141145npm i scalable-form-editor -S
@@ -181,6 +185,8 @@ class FormEditorExample extends Component {
181185
182186![ ] ( https://img.alicdn.com/tfs/TB1m6eUz4v1gK0jSZFFXXb0sXXa-2874-1486.png )
183187
188+
189+
184190### 使用Scalable Form站点
185191实际业务使用中,Scalable Form整体上由三个主要部分组成,表单渲染端,表单配置端,表单存储的服务端。
186192
0 commit comments