@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
2,513 lines • 338 kB
HTML
View Raw
<!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"><span class="octicon octicon-link"></span></a></h1><p align="center">
  <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>
</p>

<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="#开发指南"><span class="octicon octicon-link"></span></a></h2><h3>何时使用<a id="user-content-何时使用" name="何时使用" class="anchor" aria-hidden="true" href="#何时使用"><span class="octicon octicon-link"></span></a></h3><p>涉及到表单数据操作、校验的地方都可以用 Field 来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。</p>
<h3>使用注意<a id="user-content-使用注意" name="使用注意" class="anchor" aria-hidden="true" href="#使用注意"><span class="octicon octicon-link"></span></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="#基本使用"><span class="octicon octicon-link"></span></a></h3>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 实例创建</span>

    <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token comment">// 注意：initValue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用setValue</span>
        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>initValue<span class="token operator">:</span><span class="token string">'first value'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token operator">&lt;</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onClick<span class="token operator">></span>获取数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<h3>更新数据<a id="user-content-更新数据" name="更新数据" class="anchor" aria-hidden="true" href="#更新数据"><span class="octicon octicon-link"></span></a></h3><h4>事件更新<a id="user-content-事件更新" name="事件更新" class="anchor" aria-hidden="true" href="#事件更新"><span class="octicon octicon-link"></span></a></h4>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'newvalue'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 赋值会自动触发render</span>
    <span class="token punctuation">}</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>设置数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<h4>props 更新<a id="user-content-props-更新" name="props-更新" class="anchor" aria-hidden="true" href="#props-更新"><span class="octicon octicon-link"></span></a></h4>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 在组件挂载之前把数据设置进去(可以用initValue替代这种用法)</span>
    <span class="token function">componentWillMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'init Name'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 接收来自props的数据</span>
    <span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span><span class="token parameter">nextProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> nextProps<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<h4>ajax 更新<a id="user-content-ajax-更新" name="ajax-更新" class="anchor" aria-hidden="true" href="#ajax-更新"><span class="octicon octicon-link"></span></a></h4>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
        <span class="token function">Ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            url<span class="token operator">:</span><span class="token string">'/demo.json'</span><span class="token punctuation">,</span>
            <span class="token function-variable function">success</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">json</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token comment">// 回调事件中赋值更新</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span>json<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>设置数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<h4>onChange 更新监控<a id="user-content-onchange-更新监控" name="onchange-更新监控" class="anchor" aria-hidden="true" href="#onchange-更新监控"><span class="octicon octicon-link"></span></a></h4><p>两种用法：</p>
<ol>
<li>统一管理</li>
</ol>

  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
        <span class="token function-variable function">onChange</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
          <span class="token keyword">switch</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">case</span> <span class="token string">'name1'</span><span class="token operator">:</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name2'</span><span class="token punctuation">,</span><span class="token string">'value set by name1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token keyword">case</span> <span class="token string">'name2'</span><span class="token operator">:</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name1'</span><span class="token punctuation">,</span><span class="token string">'value set by name2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
              <span class="token keyword">break</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
          <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name1'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
          <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name2'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<ol start="2">
<li>各自管理</li>
</ol>

  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
          <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name1'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
              props<span class="token operator">:</span><span class="token punctuation">{</span>
                <span class="token function-variable function">onChange</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                  <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name2'</span><span class="token punctuation">,</span><span class="token string">'value set by name1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
          <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name2'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
              props<span class="token operator">:</span><span class="token punctuation">{</span>
                <span class="token function-variable function">onChange</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">v</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                  <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'name1'</span><span class="token punctuation">,</span><span class="token string">'value set by name2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<p>详细请查看 demo 演示 <code>关联控制</code></p>
<h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"><span class="octicon octicon-link"></span></a></h2><h3>初始化<a id="user-content-初始化" name="初始化" class="anchor" aria-hidden="true" href="#初始化"><span class="octicon octicon-link"></span></a></h3>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token keyword">let</span> myfield <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token punctuation">[</span><span class="token punctuation">,</span>options<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></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>
<p><code>options</code> 配置项</p>
<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-接口"><span class="octicon octicon-link"></span></a></h4><p><code>new</code>之后的对象提供的 api 接口 （例：<code>myfield.getValues()</code>）(<code>set</code> 开头的 api 函数不要在 render 里面操作, 可能会触发死循环)</p>
<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>&#39;error&#39; &#39;success&#39; &#39;loading&#39; &#39;&#39;</td>
<td>&#39;&#39;</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"><span class="octicon octicon-link"></span></a></h4>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token function">init</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> options<span class="token punctuation">,</span> props<span class="token punctuation">)</span></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>&#39;value&#39;</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>&#39;onChange&#39;</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>
<p>返回值</p>

  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token punctuation">{</span>id<span class="token punctuation">,</span>value<span class="token punctuation">,</span>onChange<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<h4>rules<a id="user-content-rules" name="rules" class="anchor" aria-hidden="true" href="#rules"><span class="octicon octicon-link"></span></a></h4>
  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token punctuation">{</span>
    rules<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<p>多个 rule</p>

  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token punctuation">{</span>
    rules<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">{</span>required<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>trigger<span class="token operator">:</span><span class="token string">'onBlur'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>pattern<span class="token operator">:</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">abcd</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>message<span class="token operator">:</span><span class="token string">'abcd不能缺'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token function-variable function">validator</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">'出错了'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>使用类型</th>
</tr>
</thead>
<tbody><tr>
<td>required</td>
<td>不能为空</td>
<td>Boolean</td>
<td>true</td>
<td><code>undefined/null/“”/[]</code> 会触发此规则)</td>
</tr>
<tr>
<td>pattern</td>
<td>校验正则表达式</td>
<td>正则</td>
<td></td>
<td></td>
</tr>
<tr>
<td>minLength</td>
<td>字符串最小长度 / 数组最小个数</td>
<td>Number</td>
<td></td>
<td>String/Number/Array</td>
</tr>
<tr>
<td>maxLength</td>
<td>字符串最大长度 / 数组最大个数</td>
<td>Number</td>
<td></td>
<td>String/Number/Array</td>
</tr>
<tr>
<td>length</td>
<td>字符串精确长度 / 数组精确个数</td>
<td>Number</td>
<td></td>
<td>String/Number/Array</td>
</tr>
<tr>
<td>min</td>
<td>最小值</td>
<td>Number</td>
<td></td>
<td>String/Number</td>
</tr>
<tr>
<td>max</td>
<td>最大值</td>
<td>Number</td>
<td></td>
<td>String/Number</td>
</tr>
<tr>
<td>format</td>
<td>对常用 pattern 的总结</td>
<td>String</td>
<td>url、email、tel、number</td>
<td>String</td>
</tr>
<tr>
<td>validator</td>
<td>自定义校验,(校验成功的时候不要忘记执行 <code>callback()</code>,否则会校验不返回)</td>
<td>Function(rule,value,callback)</td>
<td></td>
<td></td>
</tr>
<tr>
<td>trigger</td>
<td>触发校验的事件名称</td>
<td>String/Array</td>
<td>onChange/onBlur/...</td>
<td>onChange</td>
</tr>
<tr>
<td>message</td>
<td>出错时候信息</td>
<td>String</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h2>自定义组件接入 Field 标准<a id="user-content-自定义组件接入-field-标准" name="自定义组件接入-field-标准" class="anchor" aria-hidden="true" href="#自定义组件接入-field-标准"><span class="octicon octicon-link"></span></a></h2><ul>
<li><p>支持受控模式(value+onChange) <code>必须</code></p>
<ul>
<li>value 控制组件数据展现</li>
<li>onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)</li>
</ul>
</li>
<li><p>一次完整操作抛一次 onChange 事件 <code>建议</code>
比如有 Process 表示进展中的状态，建议增加 API <code>onProcess</code>；如果有 Start 表示启动状态，建议增加 API <code>onStart</code></p>
</li>
<li><p><code>value={undefined}</code>的时候清空数据, field 的 reset 函数会给所有组件下发 undefined 数据 <code>建议</code></p>
</li>
</ul>

  <div class="markdown">
    <div class="highlight highlight-jsx">
      <pre><code language="jsx"><span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span><span class="token parameter">nextProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'value'</span> <span class="token keyword">in</span> nextProps <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
           value<span class="token operator">:</span> nextProps<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">:</span> nextProps<span class="token punctuation">.</span>value   <span class="token comment">//  设置组件的被清空后的数值</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
    </div>
  </div>
<h2>已知问题<a id="user-content-已知问题" name="已知问题" class="anchor" aria-hidden="true" href="#已知问题"><span class="octicon octicon-link"></span></a></h2><ul>
<li>为何手动调用<code>this.field.validate</code>的时候进不了回调函数？ 答: 是不是自定义了 validator 方法,确保<code>callback</code>在任何分支下都能被执行到。</li>
</ul>

    </div>
    <h3>DEMO 列表</h3>
    <div>
        <div class="preview" id="container_basic">
          <h3>基本 - basic</h3>
          <div class="markdown">
            <p><code>getValue</code> <code>setValue</code> <code>reset</code> 的使用</p>
<hr>
<p>usage of <code>getValue</code> <code>setValue</code> <code>reset</code></p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="basic"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>



<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>values<span class="token operator">:</span> <span class="token punctuation">{</span> input<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">onGetValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> init<span class="token punctuation">,</span> setValue<span class="token punctuation">,</span> reset <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onGetValue</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>getValue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token string">'set me by click'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setValue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_onchange">
          <h3>关联控制 - controlled</h3>
          <div class="markdown">
            <p>组件之间的关联控制. <code>onChange</code> 统一管理。</p>
<hr>
<p>manage value by <code>onChange</code></p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="onchange"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> Range <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>



<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

            <span class="token keyword">switch</span> <span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">case</span> <span class="token string">'input'</span><span class="token operator">:</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'sync'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">change to: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">'select'</span><span class="token operator">:</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'sync'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is coming</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
                <span class="token keyword">case</span> <span class="token string">'range'</span><span class="token operator">:</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'sync'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> (</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">) ready</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>init<span class="token punctuation">,</span> getValue<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">;</span>
        <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>
            marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
            width<span class="token operator">:</span> <span class="token number">400</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input placeholder<span class="token operator">=</span><span class="token string">"controlled by onChange"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>layout<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token operator">&lt;</span>Input placeholder<span class="token operator">=</span><span class="token string">"under control"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>layout<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Select style<span class="token operator">=</span><span class="token punctuation">{</span>layout<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'select'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'lucy'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hugo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>hugo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token punctuation">{</span>
                <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'select'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">'hugo'</span> <span class="token operator">?</span>
                    <span class="token operator">&lt;</span>Range
                        style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">...</span>layout<span class="token punctuation">,</span> marginTop<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
                        slider<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'double'</span><span class="token punctuation">}</span> scales<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span> marks<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span>
                        <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'range'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">'onProcess'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
                    <span class="token operator">/</span><span class="token operator">></span> <span class="token operator">:</span> <span class="token keyword">null</span>
            <span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span>
            <span class="token operator">&lt;</span>Input placeholder<span class="token operator">=</span><span class="token string">"everyone can control me"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'sync'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>layout<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_normalize">
          <h3>自定义返回值 - custom value</h3>
          <div class="markdown">
            <p>当组件返回的数据和最终期望提交的格式不一致的时候，可以使用 <code>getValueFormatter</code> 和 <code>setValueFormatter</code> 两个函数做转换。</p>
<p>比如 switch 组件期望上报 0/1, date-picker 组件期望上报 YYYY-MM-DD 这种字符串格式</p>
<hr>
<p>custom get <code>value</code> by api <code>getValueFormatter</code>
custom set <code>value</code> by api <code>setValueFormatter</code></p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="normalize"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> DatePicker<span class="token punctuation">,</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> moment <span class="token keyword">from</span> <span class="token string">'moment'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>

    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Switch <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'switch'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> 
                <span class="token function-variable function">getValueFormatter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> <span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value <span class="token operator">===</span> <span class="token boolean">true</span><span class="token operator">?</span> <span class="token number">1</span><span class="token operator">:</span><span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token function-variable function">setValueFormatter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> inputValues</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value<span class="token operator">===</span><span class="token number">1</span><span class="token operator">?</span> <span class="token boolean">true</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token operator">&lt;</span>DatePicker <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'time'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> 
                <span class="token function-variable function">getValueFormatter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> <span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> value<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'YYYY-MM-DD'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token function-variable function">setValueFormatter</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> inputValues</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">moment</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token string">'YYYY-MM-DD'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>getValues<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_seterror">
          <h3>自定义错误 - custom errors</h3>
          <div class="markdown">
            <p>自己控制组件的errors</p>
<hr>
<p>set errors of component by yourself</p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="seterror"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>



<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function-variable function">validate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getErrors</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">validateCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> values</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token comment">// eslint-disable-next-line no-alert</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> init<span class="token punctuation">,</span> getError<span class="token punctuation">,</span> setError<span class="token punctuation">,</span> setErrors <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    pattern<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">hello</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                    message<span class="token operator">:</span> <span class="token string">'must be hello'</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token function">setError</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token string">'set error 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setError<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token function">setErrors</span><span class="token punctuation">(</span><span class="token punctuation">{</span>input<span class="token operator">:</span> <span class="token string">'set error 2'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setErrors<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token function">setErrors</span><span class="token punctuation">(</span><span class="token punctuation">{</span>input<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>clear<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input2'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input2'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token function">setError</span><span class="token punctuation">(</span><span class="token string">'input2'</span><span class="token punctuation">,</span> <span class="token string">'errors will be removed by onChange and shown on validate'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setError<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>validate<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
            validate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>	
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_validator">
          <h3>校验 - validate</h3>
          <div class="markdown">
            <p>校验的错误信息需要用<code>getError</code>获取</p>
<p><code>注意</code>：Form 和 Field 做了深度结合，在 Form 中使用Field，错误信息不需<code>getError</code>获取会自动展现。</p>
<hr>
<p>you can easily use validate in <code>Form</code>, or you can use <code>getError</code> to set errors where you want to put</p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="validator"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Checkbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>


<span class="token keyword">const</span> CheckboxGroup <span class="token operator">=</span> Checkbox<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>

<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'apple'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'apple'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'pear'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'pear'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'orange'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'orange'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    state <span class="token operator">=</span> <span class="token punctuation">{</span>
        checkboxStatus<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>scrollToFirstError<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">isChecked</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">'consent agreement not checked '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token function">userName</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token string">'frank'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token string">'name existed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'delete all'</span><span class="token punctuation">,</span> rules<span class="token operator">:</span> <span class="token punctuation">{</span>required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Input placeholder<span class="token operator">=</span><span class="token string">"try onBlur"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    message<span class="token operator">:</span> <span class="token string">'can not be empty'</span><span class="token punctuation">,</span>
                    trigger<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'onBlur'</span><span class="token punctuation">,</span> <span class="token string">'onChange'</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input1'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Input defaultValue<span class="token operator">=</span><span class="token string">""</span> placeholder<span class="token operator">=</span><span class="token string">"try frank"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    validator<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userName<span class="token punctuation">,</span>
                    trigger<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'onBlur'</span><span class="token punctuation">,</span> <span class="token string">'onChange'</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'loading'</span> <span class="token operator">?</span> <span class="token string">'validating...'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            agreement<span class="token operator">:</span>
            <span class="token operator">&lt;</span>Checkbox <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                valueName<span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>validator<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isChecked<span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Input<span class="token punctuation">.</span>TextArea placeholder<span class="token operator">=</span><span class="token string">">3 and &lt;10"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    minLength<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                    maxLength<span class="token operator">:</span> <span class="token number">10</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkboxStatus <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
                Array validate：
                <span class="token operator">&lt;</span>CheckboxGroup dataSource<span class="token operator">=</span><span class="token punctuation">{</span>list<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                    rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                        required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                        type<span class="token operator">:</span> <span class="token string">'array'</span><span class="token punctuation">,</span>
                        message<span class="token operator">:</span> <span class="token string">'choose one please'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
                <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">validateCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">errors<span class="token punctuation">,</span> values</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>errors<span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>validate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkboxStatus<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>checkboxStatus<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>checkboxStatus<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

            <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkboxStatus <span class="token operator">?</span> <span class="token string">'delete'</span> <span class="token operator">:</span> <span class="token string">'restore'</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_validatorPromise">
          <h3>校验 - validatePromise</h3>
          <div class="markdown">
            <p>校验的错误信息需要用<code>getError</code>获取</p>
<p><code>注意</code>：Form 和 Field 做了深度结合，在 Form 中使用Field，错误信息不需<code>getError</code>获取会自动展现。</p>
<hr>
<p>you can easily use validate in <code>Form</code>, or you can use <code>getError</code> to set errors where you want to put</p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="validatorPromise"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Checkbox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>



<span class="token keyword">const</span> CheckboxGroup <span class="token operator">=</span> Checkbox<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>

<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'apple'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'apple'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'pear'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'pear'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'orange'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'orange'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    state <span class="token operator">=</span> <span class="token punctuation">{</span>
        checkboxStatus<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>scrollToFirstError<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">isChecked</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'consent agreement not checked '</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token function">userName</span><span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token string">'frank'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'name existed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'delete all'</span><span class="token punctuation">,</span> rules<span class="token operator">:</span> <span class="token punctuation">{</span>required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Input placeholder<span class="token operator">=</span><span class="token string">"try onBlur"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    message<span class="token operator">:</span> <span class="token string">'can not be empty'</span><span class="token punctuation">,</span>
                    trigger<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'onBlur'</span><span class="token punctuation">,</span> <span class="token string">'onChange'</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input1'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'input1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Input defaultValue<span class="token operator">=</span><span class="token string">""</span> placeholder<span class="token operator">=</span><span class="token string">"try frank"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    validator<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userName<span class="token punctuation">,</span>
                    trigger<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'onBlur'</span><span class="token punctuation">,</span> <span class="token string">'onChange'</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'loading'</span> <span class="token operator">?</span> <span class="token string">'validating...'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            agreement<span class="token operator">:</span>
            <span class="token operator">&lt;</span>Checkbox <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                valueName<span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>validator<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isChecked<span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Input<span class="token punctuation">.</span>TextArea placeholder<span class="token operator">=</span><span class="token string">">3 and &lt;10"</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                    required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    minLength<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                    maxLength<span class="token operator">:</span> <span class="token number">10</span>
                <span class="token punctuation">}</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'textarea'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkboxStatus <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
                Array validate：
                <span class="token operator">&lt;</span>CheckboxGroup dataSource<span class="token operator">=</span><span class="token punctuation">{</span>list<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                    rules<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
                        required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                        type<span class="token operator">:</span> <span class="token string">'array'</span><span class="token punctuation">,</span>
                        message<span class="token operator">:</span> <span class="token string">'choose one please'</span>
                    <span class="token punctuation">}</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
                <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">)</span> <span class="token operator">?</span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getError</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">validatePromise</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>errors<span class="token punctuation">,</span> values<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>errors<span class="token punctuation">,</span> values<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>validate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkboxStatus<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>checkboxStatus<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>checkboxStatus<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>

            <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>checkboxStatus <span class="token operator">?</span> <span class="token string">'delete'</span> <span class="token operator">:</span> <span class="token string">'restore'</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_redux">
          <h3>redux 中使用 - with redux</h3>
          <div class="markdown">
            <p>在 redux 中使用, 在 <code>componentWillReceiveProps</code> 更新</p>
<hr>
<p>set value in <code>componentWillReceiveProps</code></p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="redux"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers<span class="token punctuation">,</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider<span class="token punctuation">,</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">formReducer</span><span class="token punctuation">(</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>email<span class="token operator">:</span> <span class="token string">'frankqian@qq.com'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> action<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">case</span> <span class="token string">'save_fields'</span><span class="token operator">:</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                <span class="token operator">...</span>action<span class="token punctuation">.</span>payload
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">default</span><span class="token operator">:</span>
            <span class="token keyword">return</span> state<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    <span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span><span class="token parameter">nextProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValues</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            email<span class="token operator">:</span> nextProps<span class="token punctuation">.</span>email<span class="token punctuation">,</span>
            newlen<span class="token operator">:</span> nextProps<span class="token punctuation">.</span>email<span class="token punctuation">.</span>length
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onChange'</span><span class="token punctuation">,</span> name<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'newlen'</span><span class="token punctuation">,</span> value<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                type<span class="token operator">:</span> <span class="token string">'save_fields'</span><span class="token punctuation">,</span>
                payload<span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token operator">:</span> value
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">setEmail</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            type<span class="token operator">:</span> <span class="token string">'save_fields'</span><span class="token punctuation">,</span>
            payload<span class="token operator">:</span> <span class="token punctuation">{</span>
                email<span class="token operator">:</span> <span class="token string">'qq@gmail.com'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>


    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">const</span> newLen <span class="token operator">=</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'newlen'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initValue<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>email<span class="token punctuation">.</span>length <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'email'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initValue<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>email <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                rules<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span>required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'email'</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">'at least 5 chars'</span><span class="token punctuation">}</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            now length is<span class="token operator">:</span><span class="token punctuation">{</span>newLen<span class="token punctuation">.</span>value<span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>email<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>email<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setEmail</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>set<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


<span class="token keyword">const</span> ReduxDemo <span class="token operator">=</span> <span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        email<span class="token operator">:</span> state<span class="token punctuation">.</span>formReducer<span class="token punctuation">.</span>email
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Demo<span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span><span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    formReducer
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">ReduxDemo</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_autounmout">
          <h3>自动卸载 - auto unmount</h3>
          <div class="markdown">
            <p>autoUnmount 默认为 true，当组件被 unmount 的时候会自动删除数据. autoUnmount 设置为 false 后，会一直保存数据.</p>
<hr>
<p>autoUnmount is true by default, and data will be deleted automatically. Field will keep data while autoUnmount is set to false.</p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="autounmout"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>


<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    state <span class="token operator">=</span> <span class="token punctuation">{</span>
        show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        show2<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    field2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> autoUnmount<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
                <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show <span class="token operator">?</span> <span class="token operator">&lt;</span> Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initValue<span class="token operator">:</span> <span class="token string">'autoUnmount = true'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'value auto delete'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    print
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> show<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">warning</span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    <span class="token keyword">delete</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
                <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show2 <span class="token operator">?</span> <span class="token operator">&lt;</span> Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>field2<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> initValue<span class="token operator">:</span> <span class="token string">'autoUnmount = false'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'value always exist'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field2<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    print
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> show2<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">warning</span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    <span class="token keyword">delete</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_same-name">
          <h3>自动卸载同名组件 - same name</h3>
          <div class="markdown">
            <p>2 个组件相同 name，删除其中一个的时候数据要保留.</p>
<hr>
<p>2 Component with same name, while delete one should keep the data.</p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="same-name"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    state <span class="token operator">=</span> <span class="token punctuation">{</span>
        show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        show2<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
                <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show <span class="token operator">?</span> <span class="token operator">&lt;</span>Input<span class="token punctuation">.</span>TextArea <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'same name'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>  <span class="token operator">/</span><span class="token operator">></span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> show<span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">warning</span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    <span class="token keyword">delete</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
                <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show2 <span class="token operator">?</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'same name'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>  <span class="token operator">/</span><span class="token operator">></span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> show2<span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show2 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
                    <span class="token attr-name">warning</span>
                    <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    <span class="token keyword">delete</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span>
                    <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'value always exist'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
                <span class="token punctuation">></span></span>
                    print
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_dynamic">
          <h3>动态表格 - dynamic</h3>
          <div class="markdown">
            <p>通过 <code>deleteArrayValue/addArrayValue</code> 可以往数组格式的数据里面 删除/添加 数据, 并且自动订正其他 name 的 偏移问题</p>
<hr>
<p>by use <code>deleteArrayValue/addArrayValue</code> could delete and add array , and fix keys offset problem</p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="dynamic"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Table <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">CustomInput</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>idx <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            parseName<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            values<span class="token operator">:</span> <span class="token punctuation">{</span>
                name<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">i</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                    <span class="token keyword">return</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> i<span class="token punctuation">,</span> input<span class="token operator">:</span> i<span class="token punctuation">,</span> custom<span class="token operator">:</span> i <span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function-variable function">getValues</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> values <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">addItem</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token operator">++</span><span class="token keyword">this</span><span class="token punctuation">.</span>idx<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">addArrayValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>idx<span class="token punctuation">,</span> input<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>idx<span class="token punctuation">,</span> custom<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>idx<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token function">removeItem</span><span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">deleteArrayValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token function-variable function">input</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">&lt;</span>Input  <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">name.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.input</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token function-variable function">customInput</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">&lt;</span>CustomInput  <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">name.</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.custom</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
    <span class="token function-variable function">op</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addItem</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>add<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">warning</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token keyword">delete</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> dataSource <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table</span></span> <span class="token attr-name">dataSource</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dataSource<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table.Column</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span> <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table.Column</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span> <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span> <span class="token attr-name">cell</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>input<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table.Column</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span> <span class="token attr-name">dataIndex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span> <span class="token attr-name">cell</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>customInput<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Table.Column</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>operation<span class="token punctuation">"</span></span> <span class="token attr-name">cell</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>op<span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">150</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Table</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pre</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>dataSource<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pre</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_mix">
          <h3>组合使用 - mix usage</h3>
          <div class="markdown">
            <p>多组件混合使用</p>
<hr>
<p>multi type of component</p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="mix"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Checkbox<span class="token punctuation">,</span> Input<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Select<span class="token punctuation">,</span> Range<span class="token punctuation">,</span> DatePicker<span class="token punctuation">,</span> TimePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>


<span class="token keyword">const</span> CheckboxGroup <span class="token operator">=</span> Checkbox<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>
<span class="token keyword">const</span> RadioGroup <span class="token operator">=</span> Radio<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>

<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'apple'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'apple'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'pear'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'pear'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token string">'orange'</span><span class="token punctuation">,</span>
        label<span class="token operator">:</span> <span class="token string">'orange'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>
    marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    width<span class="token operator">:</span> <span class="token number">400</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>init<span class="token punctuation">,</span> getValue<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token operator">&lt;</span>RadioGroup <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'radiogroup'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">A</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">B</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">C</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Radio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>d<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token constant">D</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">RadioGroup</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

            <span class="token punctuation">{</span>
                <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'radiogroup'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">'d'</span> <span class="token operator">?</span>
                    <span class="token operator">&lt;</span>Select <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'lucy'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>layout<span class="token punctuation">}</span><span class="token operator">></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>jack<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lucy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>lucy<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select.Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hugohua<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>hugohua<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select.Option</span></span><span class="token punctuation">></span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span> <span class="token operator">:</span>
                    <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'frankqian'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token operator">&lt;</span>Range style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">...</span>layout<span class="token punctuation">,</span> marginTop<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">}</span> slider<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">'double'</span><span class="token punctuation">}</span> scales<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span>
                marks<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'range'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token operator">&lt;</span>CheckboxGroup dataSource<span class="token operator">=</span><span class="token punctuation">{</span>list<span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'checkboxgroup'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token operator">&lt;</span>DatePicker <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'datepicker'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token operator">&lt;</span>DatePicker<span class="token punctuation">.</span>RangePicker <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'rangepicker'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
                <span class="token operator">&lt;</span>TimePicker <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'timepicker'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>getValues<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValues</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    name<span class="token operator">:</span> <span class="token string">'hugohua'</span><span class="token punctuation">,</span>
                    range<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                    checkboxgroup<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'orange'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                    radiogroup<span class="token operator">:</span> <span class="token string">'d'</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setValues<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_valuename">
          <h3>自定义受控字段 - custom valueName</h3>
          <div class="markdown">
            <p>valueName 的默认值为 value，如果为其他需要用 valueName 指定</p>
<hr>
<p>default valueName is <code>value</code></p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="valuename"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Checkbox<span class="token punctuation">,</span> Radio<span class="token punctuation">,</span> Switch <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>



<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>

    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> init <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span>init<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Radio <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'radio'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> valueName<span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span> checked<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Radio</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token operator">&lt;</span>Checkbox <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'checkbox'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>valueName<span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span> initValue<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">></span>
                defaultChecked
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Checkbox</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
            <span class="token operator">&lt;</span>Switch <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'switch'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>valueName<span class="token operator">:</span> <span class="token string">'checked'</span><span class="token punctuation">,</span> initValue<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
                style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> marginBottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>getValues<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValues</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    radio<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    <span class="token keyword">switch</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                    checkbox<span class="token operator">:</span> <span class="token boolean">false</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span> setValues <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_custom">
          <h3>自定义组件 - custom</h3>
          <div class="markdown">
            <p>自己的组件如何接入Field。</p>
<p><code>最低标准</code>: 组件支持 <code>onChange</code> 读取组件数据。<code>达到效果</code>：Field 可以 getValue，但是 setValue 无效</p>
<p><code>完全支持</code>: 组件支持<a href="https://facebook.github.io/react/docs/forms.html#controlled-components" title="null">受控</a>， 也就是支持两个api：<code>value</code> <code>onChange</code>. value: 设置组件的数据; onChange: 在组件修改的时候在第一个数暴露数据</p>
<hr>
<p><code>must</code>: has api of <code>onChange</code>, so you can use <code>getValue</code> but you can&#39;t <code>setValue</code>
<code>perfect support</code>: has api of <code>value</code> <code>onChange</code>. value: set data for component; onChange: return first param for component</p>
<style>.demo .next-btn {
    margin-right: 5px;
}
.custom {
    border: 1px dashed;
    padding: 4px;
    display: inline-block;
}
.custom span {
    border: 1px solid green;
    padding: 0px 5px;
    height: 24px;
    display: inline-block;
    margin-right: 2px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="custom"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>


<span class="token keyword">class</span> <span class="token class-name">Custom</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
            value<span class="token operator">:</span> <span class="token keyword">typeof</span> props<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">'undefined'</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">:</span> props<span class="token punctuation">.</span>value
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// update value</span>
    <span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span><span class="token parameter">nextProps</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'value'</span> <span class="token keyword">in</span> nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                value<span class="token operator">:</span> <span class="token keyword">typeof</span> nextProps<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">'undefined'</span> <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">:</span> nextProps<span class="token punctuation">.</span>value
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token function-variable function">onAdd</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'new'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            value
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChange</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">v<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token punctuation">{</span>v<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onAdd</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>Add ＋ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">/* eslint-disable react/no-multi-comp */</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        deepReset<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">onGetValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> init<span class="token punctuation">,</span> setValue<span class="token punctuation">,</span> reset <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Custom <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'test'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onGetValue</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>getValue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'custom'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'test'</span><span class="token punctuation">,</span> <span class="token string">'setValue'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setValue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.custom</span> <span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px dashed<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.custom span</span> <span class="token punctuation">{</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid green<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0px 5px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_topath">
          <h3>结构化解析 - Parse Array or Object</h3>
          <div class="markdown">
            <p>把 <code>init(&#39;obj.b&#39;)</code> 的数据转换成 <code>obj={obj:{b:&#39;value&#39;}}</code>；</p>
<p>把 <code>init(&#39;arr.0&#39;)</code> 的数据转换成 <code>obj={arr:[&#39;&#39;]}</code>；</p>
<hr>
<p>from <code>init(&#39;obj.b&#39;)</code> to <code>obj={obj:{b:&#39;value&#39;}}</code>；</p>
<p>from <code>init(&#39;arr.0&#39;)</code> to <code>obj={arr:[&#39;&#39;]}</code>；</p>
<style>.demo .next-btn {
    margin-right: 5px;
}</style>
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="topath"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>



<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
    field <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Field</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        parseName<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        values<span class="token operator">:</span> <span class="token punctuation">{</span>
            objWithDefaults<span class="token operator">:</span> <span class="token punctuation">{</span>
                a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                b<span class="token operator">:</span> <span class="token number">2</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">onGetValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">onSetValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">setValues</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            obj<span class="token operator">:</span> <span class="token punctuation">{</span>
                b<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span>
                c<span class="token operator">:</span> <span class="token string">'c'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            arr<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'first'</span><span class="token punctuation">,</span> <span class="token string">'second'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            objWithDefaults<span class="token operator">:</span> <span class="token punctuation">{</span>
                a<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
                b<span class="token operator">:</span> <span class="token number">200</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> init<span class="token punctuation">,</span> reset<span class="token punctuation">,</span> resetToDefault <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Object transfer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
            obj<span class="token punctuation">.</span>b<span class="token operator">:</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'obj.b'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'test1'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token entity named-entity" title="&nbsp;">&amp;nbsp;</span>
            obj<span class="token punctuation">.</span>c<span class="token operator">:</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'obj.c'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'test2'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Array transfer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
            arr<span class="token punctuation">.</span><span class="token number">0</span><span class="token operator">:</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'arr.0'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token entity named-entity" title="&nbsp;">&amp;nbsp;</span>
            arr<span class="token punctuation">.</span><span class="token number">1</span><span class="token operator">:</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'arr.1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Object <span class="token keyword">with</span> Defaults<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
            objWithDefaults<span class="token punctuation">.</span>a<span class="token operator">:</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'objWithDefaults.a'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token entity named-entity" title="&nbsp;">&amp;nbsp;</span>
            objWithDefaults<span class="token punctuation">.</span>b<span class="token operator">:</span> <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'objWithDefaults.b'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            result<span class="token operator">:</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pre</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>field<span class="token punctuation">.</span><span class="token function">getValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pre</span><span class="token punctuation">></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onGetValue</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>getValues<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onSetValue</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>setValues<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">reset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>reset<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">resetToDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>resetToDefault<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
              <div class="highlight">
                <pre><code lang="css"><span class="token selector">.demo .next-btn</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
              </div>
            </div>
          </div>
        </div>
        <div class="preview" id="container_useField">
          <h3>Hooks</h3>
          <div class="markdown">
            <p><code>getUseField</code> requires <code>useState</code> and <code>useMemo</code> implementation from React or Rax. Extend the <code>Field</code> Component and add a <code>useField</code> static method.</p>
<p><code>static useField(...args) {
    return this.getUseField(useState)(...args);
}</code></p>

          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="useField"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx"><span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useMemo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Input<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@alifd/next'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Field <span class="token keyword">from</span> <span class="token string">'@alifd/field'</span><span class="token punctuation">;</span>


<span class="token keyword">class</span> <span class="token class-name">myField</span> <span class="token keyword">extends</span> <span class="token class-name">Field</span> <span class="token punctuation">{</span>
    <span class="token keyword">static</span> <span class="token function">useField</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUseField</span><span class="token punctuation">(</span><span class="token punctuation">{</span>useState<span class="token punctuation">,</span> useMemo<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

 
<span class="token keyword">function</span> <span class="token function">NewApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> field <span class="token operator">=</span> myField<span class="token punctuation">.</span><span class="token function">useField</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> <span class="token punctuation">{</span> init<span class="token punctuation">,</span> setValue<span class="token punctuation">,</span> reset <span class="token punctuation">}</span> <span class="token operator">=</span> field<span class="token punctuation">;</span>

    <span class="token keyword">function</span> <span class="token function">onGetValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>field<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">function</span> <span class="token function">onSetValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        field<span class="token punctuation">.</span><span class="token function">setValue</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token string">'xyz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token operator">&lt;</span>Input <span class="token punctuation">{</span><span class="token operator">...</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>initValue<span class="token operator">:</span> <span class="token string">'test'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onSetValue<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> setValue <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onGetValue<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> getValue <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 
 
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">NewApp</span></span><span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
              </div>
            </div>
          </div>
        </div>
    </div>
    <ul class="demo-list">
      <li>示例导航</li>
      <li><a href="#container_basic">基本 - basic</a></li>
      <li><a href="#container_onchange">关联控制 - controlled</a></li>
      <li><a href="#container_normalize">自定义返回值 - custom value</a></li>
      <li><a href="#container_seterror">自定义错误 - custom errors</a></li>
      <li><a href="#container_validator">校验 - validate</a></li>
      <li><a href="#container_validatorPromise">校验 - validatePromise</a></li>
      <li><a href="#container_redux">redux 中使用 - with redux</a></li>
      <li><a href="#container_autounmout">自动卸载 - auto unmount</a></li>
      <li><a href="#container_same-name">自动卸载同名组件 - same name</a></li>
      <li><a href="#container_dynamic">动态表格 - dynamic</a></li>
      <li><a href="#container_mix">组合使用 - mix usage</a></li>
      <li><a href="#container_valuename">自定义受控字段 - custom valueName</a></li>
      <li><a href="#container_custom">自定义组件 - custom</a></li>
      <li><a href="#container_topath">结构化解析 - Parse Array or Object</a></li>
      <li><a href="#container_useField">Hooks</a></li>
    </ul>
  </div>

<script type="text/javascript" src="./index.js"></script></body>

</html>