@alifd/field

Version:

Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.

unpkg.com/@alifd/field@1.5.8/build/index.html

alibaba-fusion/field

966 lines (860 loc) • 338 kB

HTML

<!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;margin: 0 155px 0 60px;}.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:40px;right:2px;width:150px;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> <link href="./index.css" rel="stylesheet"></head> <body> <div class="container"> <h1> </h1> <div class="markdown"> <h1>Field<a id="user-content-field" name="field" class="anchor" aria-hidden="true" href="#field"></a></h1> <a href="https://www.npmjs.org/package/@alifd/field"><img src="https://img.shields.io/npm/v/@alifd/field.svg"></a> <a href="https://www.npmjs.org/package/@alifd/field"><img src="https://img.shields.io/npm/dm/@alifd/field.svg"></a> <a href="https://codecov.io/gh/alibaba-fusion/field"><img src="https://codecov.io/gh/alibaba-fusion/field/branch/master/graph/badge.svg"></a> <a href="https://travis-ci.com/alibaba-fusion/field"><img src="https://travis-ci.com/alibaba-fusion/field.svg?branch=master"></a> <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a> <a href="https://github.com/alibaba-fusion/field/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg"></a> <a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"></a> <ul> <li>category: Components</li> <li>family: DataEntry</li> <li>chinese: 表单辅助工具</li> <li>cols: 1</li> <li>type: 表单</li> </ul> <hr> <h2>开发指南<a id="user-content-开发指南" name="开发指南" class="anchor" aria-hidden="true" href="#开发指南"></a></h2><h3>何时使用<a id="user-content-何时使用" name="何时使用" class="anchor" aria-hidden="true" href="#何时使用"></a></h3>涉及到表单数据操作、校验的地方都可以用 Field 来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。 <h3>使用注意<a id="user-content-使用注意" name="使用注意" class="anchor" aria-hidden="true" href="#使用注意"></a></h3><ul> <li>使用 Field <code>init</code> 过的组件, <code>value</code> <code>onChange</code> 必须放在 init 的第三个参数, 否则有可能被 init 覆盖。</li> <li><code>Form</code>已经和<code>Field</code> 在<code>数据获取</code>和<code>自动校验提示</code>方面做了深度优化，建议在<code>Form</code>中使用<code>Field</code>, 请查看 Form demo。</li> <li>initValue 类似组件的 defaultValue 只有在组件第一次 render 的时候才生效(ajax 异步调用设置 initValue 可能已经错过了第一次 render)</li> <li>autoUnmount 默认打开的，如果需要保留会 <code>自动卸载的组件</code> 数据请关闭此项</li> <li><code>parseName=true</code> 可以通过 <code>getValues</code> 获取到结构化的数据, 但是 getValue 还是必须传完整 key 值</li> </ul> <h3>基本使用<a id="user-content-基本使用" name="基本使用" class="anchor" aria-hidden="true" href="#基本使用"></a></h3> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">class Demo extends React.Component { field = new Field(this); // 实例创建 onClick = ()=>{ console.log(this.field.getValue('name')); } render() { const init = this.field.init; // 注意：initValue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用setValue return <div> <Input {...init('name',{initValue:'first value'})} /> <button onClick={this.onClick>获取数据</button> </div> } }</code></pre> </div> </div> <h3>更新数据<a id="user-content-更新数据" name="更新数据" class="anchor" aria-hidden="true" href="#更新数据"></a></h3><h4>事件更新<a id="user-content-事件更新" name="事件更新" class="anchor" aria-hidden="true" href="#事件更新"></a></h4> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">class Demo extends React.Component { field = new Field(this); onClick = ()=>{ this.field.setValue('name', 'newvalue'); // 赋值会自动触发render } render() { const init = this.field.init; return <div> <Input {...init('name')} /> <button onClick={this.onClick}>设置数据</button> </div> } }</code></pre> </div> </div> <h4>props 更新<a id="user-content-props-更新" name="props-更新" class="anchor" aria-hidden="true" href="#props-更新"></a></h4> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">class Demo extends React.Component { field = new Field(this); // 在组件挂载之前把数据设置进去(可以用initValue替代这种用法) componentWillMount() { this.field.setValue('name', 'init Name') } // 接收来自props的数据 componentWillReceiveProps(nextProps) { this.field.setValue('name', nextProps.name) } render() { const init = this.field.init; return <div> <Input {...init('name')} /> </div> } }</code></pre> </div> </div> <h4>ajax 更新<a id="user-content-ajax-更新" name="ajax-更新" class="anchor" aria-hidden="true" href="#ajax-更新"></a></h4> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">class Demo extends React.Component { field = new Field(this); onClick = ()=>{ Ajax({ url:'/demo.json', success:(json)=>{ // 回调事件中赋值更新 this.field.setValue('name',json.name); } }); } render() { const init = this.field.init; return <div> <Input {...init('name')} /> <button onClick={this.onClick}>设置数据</button> </div> } }</code></pre> </div> </div> <h4>onChange 更新监控<a id="user-content-onchange-更新监控" name="onchange-更新监控" class="anchor" aria-hidden="true" href="#onchange-更新监控"></a></h4>两种用法： <ol> <li>统一管理</li> </ol> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">class Demo extends React.Component { field = new Field(this,{ onChange:(name, value) => { switch(name) { case 'name1': this.field.setValue('name2','value set by name1'); break; case 'name2': this.field.setValue('name1','value set by name2'); break; } } }); render() { const init = this.field.init; return <div> <Input {...init('name1')} /> <Input {...init('name2')} /> </div> } }</code></pre> </div> </div> <ol start="2"> <li>各自管理</li> </ol> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">class Demo extends React.Component { render() { const init = this.field.init; return <div> <Input {...init('name1',{ props:{ onChange:(v)=>{ this.field.setValue('name2','value set by name1'); } } })} /> <Input {...init('name2',{ props:{ onChange:(v)=>{ this.field.setValue('name1','value set by name2'); } } })} /> </div> } }</code></pre> </div> </div> 详细请查看 demo 演示 <code>关联控制</code> <h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"></a></h2><h3>初始化<a id="user-content-初始化" name="初始化" class="anchor" aria-hidden="true" href="#初始化"></a></h3> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">let myfield = new Field(this [,options]);</code></pre> </div> </div> <table> <thead> <tr> <th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th> </tr> </thead> <tbody><tr> <td>this</td> <td>传入调用 class 的 this</td> <td>React.Component</td> <td>必须设置</td> <td></td> </tr> <tr> <td>options</td> <td>一些事件配置, 详细参数如下</td> <td>Object</td> <td>非必须</td> <td></td> </tr> </tbody></table> <code>options</code> 配置项 <table> <thead> <tr> <th>参数</th> <th>说明</th> <th>类型</th> <th>默认值</th> </tr> </thead> <tbody><tr> <td>onChange</td> <td>所有组件的 change 都会到达这里[setValue 不会触发该函数]</td> <td>Function(name,value)</td> <td></td> </tr> <tr> <td>parseName</td> <td>是否翻译<code>init(name)</code>中的<code>name</code>(getValues 会把带<code>.</code>的字符串转换成对象)</td> <td>Boolean</td> <td>false</td> </tr> <tr> <td>forceUpdate</td> <td>仅建议 PureComponent 的组件打开此强制刷新功能，会带来性能问题(500 个组件为例：打开的时候 render 花费 700ms, 关闭时候 render 花费 400ms)</td> <td>Boolean</td> <td>false</td> </tr> <tr> <td>scrollToFirstError</td> <td>field.validate 的时候滚动到第一个出错的组件, 如果是整数会进行偏移</td> <td>Boolean/Number</td> <td>true</td> </tr> <tr> <td>autoUnmount</td> <td>自动删除 Unmout 元素，如果想保留数据可以设置为 false</td> <td>Boolean</td> <td>true</td> </tr> <tr> <td>autoValidate</td> <td>是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验</td> <td>Boolean</td> <td>true</td> </tr> <tr> <td>values</td> <td>初始化数据</td> <td>Object</td> <td></td> </tr> </tbody></table> <h4>API 接口<a id="user-content-api-接口" name="api-接口" class="anchor" aria-hidden="true" href="#api-接口"></a></h4><code>new</code>之后的对象提供的 api 接口（例：<code>myfield.getValues()</code>）(<code>set</code> 开头的 api 函数不要在 render 里面操作, 可能会触发死循环) <table> <thead> <tr> <th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th> </tr> </thead> <tbody><tr> <td>init</td> <td>初始化每个组件，<a href="#init" title="详细参数如下">详细参数如下</a>）</td> <td>Function(name:String, option:Object)</td> <td></td> <td></td> </tr> <tr> <td>getValues</td> <td>获取一组输入控件的值，如不传入参数，则获取全部组件的值</td> <td>Function([names: String[]])</td> <td></td> <td></td> </tr> <tr> <td>getValue</td> <td>获取单个输入控件的值</td> <td>Function(name: String)</td> <td></td> <td></td> </tr> <tr> <td>setValues</td> <td>设置一组输入控件的值（会触发 render，请遵循 react 时机使用)</td> <td>Function(obj: Object)</td> <td></td> <td></td> </tr> <tr> <td>setValue</td> <td>设置单个输入控件的值（会触发 render，请遵循 react 时机使用)</td> <td>Function(name: String, value)</td> <td></td> <td></td> </tr> <tr> <td>validate</td> <td>校验并获取一组输入域的值与 Error</td> <td>Function([names: String[]], [options: Object], callback: Function(errors, values))</td> <td></td> <td></td> </tr> <tr> <td>getError</td> <td>获取单个输入控件的 Error</td> <td>Function(name: String)</td> <td></td> <td></td> </tr> <tr> <td>getErrors</td> <td>获取一组输入控件的 Error</td> <td>Function([name: String])</td> <td></td> <td></td> </tr> <tr> <td>setError</td> <td>设置单个输入控件的 Error</td> <td>Function(name: String, errors:String/Array[String])</td> <td></td> <td></td> </tr> <tr> <td>setErrors</td> <td>设置一组输入控件的 Error</td> <td>Function(obj: Object)</td> <td></td> <td></td> </tr> <tr> <td>reset</td> <td>重置一组输入控件的值、清空校验</td> <td>Function([names: String[]])</td> <td></td> <td></td> </tr> <tr> <td>resetToDefault</td> <td>重置一组输入控件的值为默认值</td> <td>Function([names: String[]])</td> <td></td> <td></td> </tr> <tr> <td>getState</td> <td>判断校验状态</td> <td>Function(name: String)</td> <td>'error' 'success' 'loading' ''</td> <td>''</td> </tr> <tr> <td>getNames</td> <td>获取所有组件的 key</td> <td>Function()</td> <td></td> <td></td> </tr> <tr> <td>remove</td> <td>删除某一个或者一组控件的数据，删除后与之相关的 validate/value 都会被清空</td> <td>Function(name: String/String[])</td> <td></td> <td></td> </tr> <tr> <td>addArrayValue</td> <td>添加 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题</td> <td>Function(key: String, index: Number, value1, value2, ...)</td> <td></td> <td></td> </tr> <tr> <td>deleteArrayValue</td> <td>删除 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题</td> <td>Function(key: String, index: Number, howmany)</td> <td></td> <td></td> </tr> </tbody></table> <h4>init<a id="user-content-init" name="init" class="anchor" aria-hidden="true" href="#init"></a></h4> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">init(name, options, props)</code></pre> </div> </div> <table> <thead> <tr> <th>参数</th> <th>说明</th> <th>类型</th> <th>可选值</th> <th>默认值</th> </tr> </thead> <tbody><tr> <td>id</td> <td>自定义的表单域 id，如不提供则使用 name 替代</td> <td>String</td> <td></td> <td></td> </tr> <tr> <td>name</td> <td>必填输入控件唯一标志</td> <td>String</td> <td></td> <td></td> </tr> <tr> <td>options.valueName</td> <td>组件值的属性名称，如 Checkbox 的是 <code>checked</code>，Input 是 <code>value</code></td> <td>String</td> <td></td> <td>'value'</td> </tr> <tr> <td>options.initValue</td> <td>组件初始值(组件第一次 render 的时候才会读取，后面再修改此值无效),类似 defaultValue</td> <td>any</td> <td></td> <td></td> </tr> <tr> <td>options.trigger</td> <td>触发数据变化的事件名称</td> <td>String</td> <td></td> <td>'onChange'</td> </tr> <tr> <td>options.rules</td> <td>校验规则</td> <td>Array/Object</td> <td></td> <td></td> </tr> <tr> <td>options.getValueFormatter</td> <td>自定义从组件获取 <code>value</code> 的方式，详细用法查看 demo <code>自定义数据获取</code></td> <td>Function(value,...args) 参数顺序和组件的 onChange 完全一致</td> <td></td> <td></td> </tr> <tr> <td>options.setValueFormatter</td> <td>自定义转换 <code>value</code> 为组件需要的数据，详细用法查看 demo <code>自定义数据获取</code></td> <td>Function(value)</td> <td></td> <td></td> </tr> <tr> <td>props</td> <td>组件自定义的事件可以写在这里</td> <td>Object</td> <td></td> <td></td> </tr> <tr> <td>autoValidate</td> <td>是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验</td> <td>Boolean</td> <td>true</td> <td></td> </tr> </tbody></table> 返回值 <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">{id,value,onChange}</code></pre> </div> </div> <h4>rules<a id="user-content-rules" name="rules" class="anchor" aria-hidden="true" href="#rules"></a></h4> <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">{ rules:[{ required: true }] }</code></pre> </div> </div> 多个 rule <div class="markdown"> <div class="highlight highlight-jsx"> <pre><code language="jsx">{ rules:[{required:true,trigger:'onBlur'},<span class="token pu