@ice/form

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>飞冰 DEMO 预览</title> <style> /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ *, *:before, *:after { box-sizing: border-box; } /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ /* 1 */ html input[type="button"], button, input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } code[class*="language-"],pre[class*="language-"]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.markdown{color:#666;font-size:14px;line-height:1.8}.highlight{line-height:1.5}.markdown img{vertical-align:middle;max-width:100%}.markdown h1{color:#404040;font-weight:500;line-height:40px;margin-bottom:24px}.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{color:#404040;margin:1.6em 0 .6em 0;font-weight:500;clear:both}.markdown h1{font-size:28px}.markdown h2{font-size:22px}.markdown h3{font-size:18px}.markdown h4{font-size:16px}.markdown h5{font-size:14px}.markdown h6{font-size:12px}.markdown hr{height:1px;border:0;background:#e9e9e9;margin:16px 0;clear:both}.markdown p,.markdown pre{margin:1em 0}.markdown>p,.markdown>blockquote,.markdown>ol,.markdown>ul{width:80%}.markdown ul>li{list-style:circle}.markdown>ul li,.markdown blockquote ul>li{margin-left:20px;padding-left:4px}.markdown>ul li p,.markdown>ol li p{margin:.6em 0}.markdown ol>li{list-style:decimal}.markdown>ol li,.markdown blockquote ol>li{margin-left:20px;padding-left:4px}.markdown code{margin:0 3px}.markdown pre{border-radius:6px;background:#f7f7f7}.markdown pre code{border:none;padding:.5em;background:#f7f7f7;margin:0;display:block}.markdown strong,.markdown b{font-weight:600}.markdown>table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #e9e9e9;width:80%;margin-bottom:24px}.markdown>table th{white-space:nowrap;color:#5C6B77;font-weight:600}.markdown>table th,.markdown>table td{border:1px solid #e9e9e9;padding:8px 16px;text-align:left}.markdown>table th{background:#F7F7F7}.markdown>table td:first-child{background:#fcfcfc;font-weight:500;width:18%}.markdown>table td:nth-child(2){min-width:30%;max-width:45%}.markdown>table td:first-child{background:#fcfcfc}.markdown>table tr td:nth-last-child(-n+2){width:13%;word-break:break-all}.markdown blockquote{font-size:90%;color:#999;border-left:4px solid #e9e9e9;padding-left:.8em;margin:1em 0;font-style:italic}.markdown blockquote p{margin:0}.markdown .anchor{opacity:0;transition:opacity .3s ease;margin-left:8px}.markdown .waiting{color:#ccc}.markdown h1:hover .anchor,.markdown h2:hover .anchor,.markdown h3:hover .anchor,.markdown h4:hover .anchor,.markdown h5:hover .anchor,.markdown h6:hover .anchor{opacity:1;display:inline-block}.markdown>br,.markdown>p>br{clear:both}.container{margin:auto;box-sizing:border-box;padding-left:10%;padding-right:200px}.meta{border-bottom:2px solid #eee;line-height:24px;color:#666}.code-box{border:1px solid #E9E9E9;border-radius:6px;display:inline-block;width:100%;position:relative;margin:0 0 16px 0;transition:all .5s ease}.code-box:hover{border-color:#ccc}.code-box:target{border:1px solid rgba(45,183,245,0.7);box-shadow:0 0 4px rgba(45,183,245,0.5)}.code-box:hover .code-box-meta,.code-box:target .code-box-meta{background:#fbfbfb}.code-box:hover .code-box-title,.code-box:target .code-box-title{background:#fbfbfb;box-shadow:0 -1.2px 0 #e9e9e9}.code-box .code-box-title a,.code-box .code-box-title a:hover{color:#666}.code-box .code-box-demo{padding:42px 20px 50px}.code-box .highlight{overflow:hidden;padding:5px;border-top:1px dashed #e9e9e9}.code-box pre{margin:0;width:auto} .demo-list{background-color:#fff;position:fixed;top:20px;right:10px;width:180px;border:1px solid #ddd;padding:0;border-radius:5px;list-style:none}.demo-list li{border-bottom:1px solid #ddd;border-left:3px solid #fff;padding:0 10px;line-height:26px;font-size:12px}.demo-list li.current{border-left:3px solid #f40}.demo-list li.current a{font-weight:700;color:#333}.demo-list li a{color:#36c;text-decoration:none} .markdown code { background: #f5f2f0; margin: 0 3px; padding: 2px 6px; border-radius: 3px; color: #dd4a68; font-size: .8rem; border: 1px solid #e9e9e9; } </style> <meta name="title" content="IceForm"><meta name="category" content="Components"><meta name="chinese" content="表单组件"><link href="./index.css" rel="stylesheet"></head> <body> <div class="container"> <h1> IceForm 表单组件 </h1> <div class="markdown"> 表单组件 <h2>参数（Props）<a id="user-content-参数（props）" name="参数（props）" class="anchor" aria-hidden="true" href="#参数（props）"></a></h2><table> <thead> <tr> <th>参数名</th> <th>说明</th> <th>必填</th> <th>类型</th> <th>默认值</th> <th>备注</th> </tr> </thead> <tbody><tr> <td>initialValues</td> <td>表单初始值</td> <td>N</td> <td>object</td> <td>{}</td> <td>-</td> </tr> <tr> <td>onSubmit</td> <td>submit函数</td> <td>Y</td> <td>function</td> <td>-</td> <td>-</td> </tr> <tr> <td>onChange</td> <td>表单变化回调</td> <td>N</td> <td>function</td> <td>-</td> <td>function(values: object, item: object) => void 参数: values: {object} 表单数据 item: {object} 详细 item.name: {string} 变化的组件名 item.value: {string} 变化的数据</td> </tr> <tr> <td>rules</td> <td>校验规则</td> <td>N</td> <td>object</td> <td>{}</td> <td>-</td> </tr> <tr> <td>effects</td> <td>联动规则</td> <td>N</td> <td>array</td> <td>[]</td> <td>-</td> </tr> <tr> <td>layout</td> <td>表单布局</td> <td>N</td> <td>object</td> <td></td> <td>-</td> </tr> <tr> <td>renderField</td> <td>自定义 Field 布局</td> <td>N</td> <td>function</td> <td>-</td> <td>function({label, component, error}) => dom 参数: label: {string/element} Field 的 label component: {string/function} 待渲染的控件 error: {string/element} Field 错误提示信息</td> </tr> </tbody></table> 其他属性比如 <code>style</code>、<code>className</code> 等均会传递到 <code>form</code> 标签上。 <code>layout</code> 是个对象，包含 4 个属性： <div class="markdown"> <div class="highlight highlight-js"> <pre><code language="js">{ labelAlign: 'left', // label 的位置，'left'、'top'，默认 'left' labelTextAlign: 'right', // label 文字对齐方式，'left'、'right'，默认 'right' labelCol: 1, // label 占的栅格宽度，共 12 等分，默认 2 wrapperCol: 3, // 控件占的栅格宽度，共 12 等分，默认 6 }</code></pre> </div> </div> <code>rules</code> 是一个 Object，<code>key</code> 是 <code><Field></code> 的 <code>name</code> 属性值，<code>value</code> 是个数组，数组里面的每一项是一个校验规则，参考 <a href="https://github.com/yiminghe/async-validator" title="null">async-validator</a>。 <div class="markdown"> <div class="highlight highlight-js"> <pre><code language="js"><Form onSubmit={this.onSubmit} style={{color: '#ee7893'}} rules={{ username: [{ required: true, min: 5, message: '姓名至少5个字符' }], age: [{ required: true, message: '年龄必填' }] }} > <Field label="姓名：" name="username" component="input" type="text" /> <Field label="年龄：" name="age" component='input' type="number" /> </Form></code></pre> </div> </div> <code>effects</code> 是个数组，写法如下： <div class="markdown"> <div class="highlight highlight-js"> <pre><code language="js"><Form onSubmit={this.onSubmit} effects={[ { field: 'username', handler: formCore => { if (formCore.getFieldValue('username') === 'ice') { formCore.setFieldValue('age', 2) } } } ]} > <div>Hello Form</div> <Field label="姓名：" name="username" component="input" type="text" /> <Field label="年龄：" name="age" component='input' type="number" /> <button type="submit">Submit</button> </Form></code></pre> </div> </div> 监听该 <code>field</code> 的 <code>onChange</code> 事件，然后设置其他表单项的数据，从而达到联动效果。<code>handler</code> 的参数是 <code>formCore</code> 对象，该对象暴露一些 api 可以设置 value、error、show/hide 等。 <h2>Field 组件<a id="user-content-field-组件" name="field-组件" class="anchor" aria-hidden="true" href="#field-组件"></a></h2><table> <thead> <tr> <th>参数名</th> <th>说明</th> <th>必填</th> <th>类型</th> <th>默认值</th> <th>备注</th> </tr> </thead> <tbody><tr> <td>label</td> <td>表单项的 label</td> <td>N</td> <td>string/element</td> <td>-</td> <td>-</td> </tr> <tr> <td>name</td> <td>表单项的 name</td> <td>Y</td> <td>string</td> <td>-</td> <td>-</td> </tr> <tr> <td>component</td> <td>表单类型，原生 html 标签或者三方组件</td> <td>N</td> <td>string/function</td> <td>-</td> <td>'input' 'textarea' Input Radio</td> </tr> <tr> <td>value</td> <td>表单项的值</td> <td>N</td> <td>-</td> <td>''</td> <td>-</td> </tr> <tr> <td>rules</td> <td>校验规则</td> <td>N</td> <td>object or array</td> <td>-</td> <td>-</td> </tr> <tr> <td>effects</td> <td>联动规则</td> <td>N</td> <td>object</td> <td>-</td> <td>-</td> </tr> <tr> <td>visible</td> <td>显示隐藏当前 Field</td> <td>N</td> <td>boolean</td> <td>true</td> <td>true/false</td> </tr> <tr> <td>setValueFormatter</td> <td>格式化控件渲染值</td> <td>N</td> <td>function</td> <td></td> <td>function(savedValue) => renderValue</td> </tr> <tr> <td>getValueFormatter</td> <td>格式化控件提交值</td> <td>N</td> <td>function</td> <td></td> <td>function(renderValue) => savedValue</td> </tr> <tr> <td>layout</td> <td>设置当前 Field 的布局</td> <td>N</td> <td>object</td> <td>同 Form layout</td> <td>当前 Field 的 layout 会覆盖 Form 的 layout</td> </tr> <tr> <td>tips</td> <td>提示信息</td> <td>N</td> <td>string</td> <td></td> <td></td> </tr> <tr> <td>valueName</td> <td>控件值的名称，比如，radio 的 valueName 为 'checked'，value 为 true/false</td> <td>N</td> <td>string</td> <td></td> <td>比如 Fusion 的 Switch 组件</td> </tr> <tr> <td>errorRender</td> <td>自定义 error 渲染</td> <td>N</td> <td>function(error) {}</td> <td></td> <td></td> </tr> <tr> <td>onChange</td> <td>自定义 onChange 函数</td> <td>N</td> <td>function() {}</td> <td></td> <td>默认情况下已处理表单的 onChange(eventOrValue) 事件，如果接入的三方控件 onChange 的第一个参数不是 event 或者 value，可以主动设置对应的值。比如，接入控件的 onChange(xxx, value) 第二个参数才是 value，则可以手动设置 <code>formCore.setValue(fieldname, value)</code></td> </tr> </tbody></table> <code>style</code>、<code>className</code> 属性会传递到 Field 最外层 dom 上，其他属性会传递到 <code>component</code> 上，如果没有 <code>component</code> 但有 <code>children</code>，则属性传递到 <code>children</code> 上。 <code>Field</code> 的 <code>rules</code> 和 <code>effects</code> 不需要 <code>name</code> 作为 key 了，写法如下： <div class="markdown"> <div class="highlight highlight-js"> <pre><code language="js"><Form onSubmit={this.onSubmit}> <Field label="姓名：" name="username" component="input" type="text" /> <Field label="昵称：" name="nickname" component="input" type="text" effects={{ handler: formCore => { if (formCore.getFieldValue('nickname') === 'snow') { formCore.setFieldProps('age', { visible: true, }); } else { formCore.setFieldProps('age', { visible: false, }); } } }} /> <Field label="年龄：" name="age" component='input' type="number" rules={[{ required: true, message: '年龄必填' }]} /> <button type="submit">Submit</button> </Form></code></pre> </div> </div> <h2>FieldArray 组件<a id="user-content-fieldarray-组件" name="fieldarray-组件" class="anchor" aria-hidden="true" href="#fieldarray-组件"></a></h2>FieldArray 表示渲染数组类型的数据，属性同 Field： <div class="markdown"> <div class="highlight highlight-js"> <pre><code language="js"><Form onSubmit={this.onSubmit} > <FieldArray label="新增顾客：" name="customers"> <Field name="customer0" component={Input} placeholder="customer name" /> <Field name="customer1" component={Input} placeholder="customer name" /> <Field name="customer2" component={Input} placeholder="customer name" /> </FieldArray> <Field label="日期：" name="date" component={DatePicker} /> <Field label=""> <Button htmlType="submit">Submit</Button> </Field> </Form></code></pre> </div> </div> <h2><code>formCore</code> API<a id="user-content-<code>formcore</code>-api" name="<code>formcore</code>-api" class="anchor" aria-hidden="true" href="#<code>formcore</code>-api"></a></h2><code>formCore</code> 会暴露一些 API，使用这些 API 可以获取、设置表单的数据、状态等。 <ul> <li><code>getFieldValue(name)</code>：获取某一 <code>Field</code> 的值</li> <li><code>setFieldValue(name, value)</code>：设置某一 <code>Field</code> 的值</li> <li><code>getValues()</code>：获取表单的 values</li> <li><code>setValues(values, runEffects)</code>：设置表单的 values，runEffects 为 Boolean，表示设置 values 之后是否需要执行表单的 effects，默认 false</li> <li><code>getFieldError(name)</code>：获取某一 <code>Field</code> 的 error 信息</li> <li><code>setFieldError(name, errMsg)</code>：设置某一 <code>Field</code> 的 error 信息</li> <li><code>getErrors()</code>：获取所有 <code>Field</code> 的 error 信息</li> <li><code>setErrors(errors)</code>：设置某些 <code>Field</code> 的 error 信息</li> <li><code>getFieldProps(name)</code>：获取某一 <code>Field</code> 的属性值</li> <li><code>setFieldProps(name, prop)</code>：设置某一 <code>Field</code> 的属性值</li> <li><code>submit()</code>：提交表单</li> <li><code>reset(initialValues)</code>：重置表单值为表单初始化时的默认值，如果表单初始化时没有默认值，则清空表单；如果传了参数 initialValues，则 initialValues 会成为新的表单默认值</li> </ul> 也可以通过属性的方式获取到一些数据： <ul> <li><code>formCore.values</code>：获取表单的所有值</li> <li><code>formCore.errors</code>：获取表单校验的错误信息</li> <li><code>formCore.pristine</code>：表单当前的 <code>values</code> 是否与 <code>initialValues</code> 相等</li> </ul> <h2>延伸阅读<a id="user-content-延伸阅读" name="延伸阅读" class="anchor" aria-hidden="true" href="#延伸阅读"></a></h2><h3>开发 @ice/form 表单背景<a id="user-content-开发-@ice/form-表单背景" name="开发-@ice/form-表单背景" class="anchor" aria-hidden="true" href="#开发-@ice/form-表单背景"></a></h3>对于前端，表单开发是一件特别繁琐的事情，尤其在中后台业务中，大家常常会被各种五花八门的表单折磨，又不得不面对现实地去寻找最佳方案，但最终都会发现过度设计的表单组件性能不好，使用简单的表单组件还是需要写大量的业务代码。经过长期的积累以及在社区的调研，我们开发了一个表单组件帮助大家快速地创建一个高性能表单。 <h3>组件特性<a id="user-content-组件特性" name="组件特性" class="anchor" aria-hidden="true" href="#组件特性"></a></h3><ul> <li>内部几乎无依赖，体积小</li> <li>内部管理表单状态，提升开发效率</li> <li>使用观察者模式提升表单性能</li> <li>强大的校验以及声明式联动</li> <li>可结合第三方组件库(Next、Antd)</li> <li>可自定义 Field</li> </ul> <h3>架构方案<a id="user-content-架构方案" name="架构方案" class="anchor" aria-hidden="true" href="#架构方案"></a></h3><img src="https://img.alicdn.com/tfs/TB1gFAvaUGF3KVjSZFoXXbmpFXa-1024-768.jpg" alt=""> 如上图所示，整个表单的数据都放在 FormCore 这一层，同时 FormCore 会暴露一些 API，以便获取、设置、处理数据。Form、Field 组件通过 Sub/Pub 模式与 FormCore 通信，FormCore 通知组件何时重新渲染。表单提供了校验、联动以及结合 Fusion、Antd 三方组件库使用等能力。 <h3>竞品对比<a id="user-content-竞品对比" name="竞品对比" class="anchor" aria-hidden="true" href="#竞品对比"></a></h3><a href="https://github.com/alibaba/nopage" title="null">NoForm</a> NoForm 是一个表单操作(比如说校验、提交、联动等)抽象到上层，下层又包装了 Next、Antd 等组件，UI 上的能力较强，也封装了一些常用的布局，但功能能力较弱，用户实现复杂逻辑还是需要写很多代码。 <a href="https://github.com/jaredpalmer/formik" title="null">Formik</a>、<a href="https://github.com/final-form/react-final-form" title="null">react-final-form</a> 这两个组件有一些共性，都是通过 render props 的方式实现了复杂的状态管理，在性能上也非常地卓越，在社区得到了大量的好评，但在联动上的能力较弱(目前只能更新 value)，而且如果要集成 Next 或者 Antd 需要将库的表单组件都封装成 Field，成本较高。 <h3>相关链接<a id="user-content-相关链接" name="相关链接" class="anchor" aria-hidden="true" href="#相关链接"></a></h3><ul> <li><a href="https://github.com/jaredpalmer/formik" title="null">formik</a></li> <li><a href="https://github.com/final-form/react-final-form" title="null">react-final-form</a></li> <li><a href="https://alibaba.github.io/nopage/#/nopage/noform/brief-intro" title="null">noform</a></li> </ul> </div> <h3>DEMO 列表</h3> <div> <div class="preview" id="container_simple"> <h3>基本用法</h3> <div class="markdown"> <code>Form</code> 的基本用法 </div> <div class="code-box"> <div class="code-box-demo"> <div id="simple"></div> </div> <div class="markdown"> <div class="highlight"> <pre><code lang="jsx">import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, Field } from '@ice/form'; import { Button, Input, Switch, Select, Checkbox } from '@alifd/next'; const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) const Option = Select.Option; class App extends Component { async onSubmit(values) { await sleep(300) window.alert(JSON.stringify(values, 0, 2)) } onChange(values, field) { console.log(values, field); } render() { return ( <div> <Form onSubmit={this.onSubmit} onChange={this.onChange} initialValues={{ username: 'icer', age: 3, intro: '让前端开发简单而友好' }} > <h2>个人资料</h2> <Field label="姓名：" name="username" component={Input} placeholder="请输入名字" /> <Field label="年龄：" name="age" component={Input} htmlType="number" placeholder="请输入年龄" /> <Field label="简介：" name="intro" component={Input.TextArea} placeholder="请简单介绍一下自己的工作经历" /> <Field label="开关：" name<span class="toke