Skip to content

Commit f1390f3

Browse files
committed
docs: update readme.md
1 parent cce3a3e commit f1390f3

1 file changed

Lines changed: 9 additions & 3 deletions

File tree

README.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -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
6464
import 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: 400px;margin-top: 20px;/* 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
141145
npm 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

Comments
 (0)