{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/form","result":{"data":{"current":{"frontmatter":{"title":"Form 表单","order":40,"brief":null,"icon":"doc-form"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#表单form","title":"表单(Form)"},{"url":"#表单控件field","title":"表单控件(Field)","items":[{"items":[{"url":"#目前-form-提供了如下表单控件","title":"目前 Form 提供了如下表单控件"}]}]},{"url":"#代码演示","title":"代码演示","items":[{"url":"#声明表单的多种写法","title":"声明表单的多种写法","items":[{"url":"#基本写法","title":"基本写法"},{"url":"#支持的其他写法","title":"支持的其他写法"},{"url":"#通过-render-属性传入","title":"通过 render 属性传入"},{"url":"#通过-child-render-function","title":"通过 child render function"},{"url":"#通过-propscomponent","title":"通过 props.component"}]},{"url":"#已支持的表单控件","title":"已支持的表单控件"},{"url":"#表单控件值的绑定","title":"表单控件值的绑定"},{"url":"#表单布局","title":"表单布局"},{"url":"#表单分组","title":"表单分组"},{"url":"#wrappercol--labelcol","title":"wrapperCol / labelCol"},{"url":"#隐藏label","title":"隐藏Label"},{"url":"#内嵌-label","title":"内嵌 Label"},{"url":"#导出-labelerrormessage-使用","title":"导出 Label、ErrorMessage 使用"},{"url":"#使用-formslot-放置自定义组件","title":"使用 Form.Slot 放置自定义组件"},{"url":"#使用-helptextextratext-放置提示信息","title":"使用 helpText、extraText 放置提示信息"},{"url":"#使用-inputgroup-组合多个-field","title":"使用 InputGroup 组合多个 Field"},{"url":"#modal-弹出层中的表单","title":"Modal 弹出层中的表单"},{"url":"#配置初始值与校验规则","title":"配置初始值与校验规则"},{"url":"#自定义校验form-级别","title":"自定义校验(Form 级别)","items":[{"url":"#同步校验","title":"同步校验"},{"url":"#异步校验","title":"异步校验"}]},{"url":"#自定义校验field-级别","title":"自定义校验(Field 级别)"},{"url":"#手动触发指定-field-校验","title":"手动触发指定 Field 校验"},{"url":"#静默校验","title":"静默校验"},{"url":"#表单联动","title":"表单联动"},{"url":"#动态表单","title":"动态表单","items":[{"url":"#动态删减表单项","title":"动态删减表单项"}]},{"url":"#使用-arrayfield","title":"使用 ArrayField","items":[{"url":"#嵌套-arrayfield","title":"嵌套 ArrayField"}]},{"url":"#hooks-的使用","title":"Hooks 的使用","items":[{"url":"#useformapi","title":"useFormApi"},{"url":"#useformstate","title":"useFormState"},{"url":"#usefieldapi","title":"useFieldApi"},{"url":"#usefieldstate","title":"useFieldState"}]},{"url":"#hoc-的使用","title":"HOC 的使用","items":[{"url":"#hoc-withformapi","title":"HOC-withFormApi"},{"url":"#hoc-withformstate","title":"HOC-withFormState"}]},{"url":"#withfield-封装自定义表单控件","title":"withField 封装自定义表单控件"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#form-props","title":"Form Props"},{"url":"#formstate","title":"FormState","items":[{"url":"#如何访问-formstate","title":"如何访问 formState"}]},{"url":"#formapi","title":"FormApi","items":[{"url":"#如何获取-formapi","title":"如何获取 formApi","items":[{"url":"#使用-formuseform","title":"使用 Form.useForm()"}]}]},{"url":"#field-props","title":"Field Props"},{"url":"#arrayfield-props","title":"ArrayField Props"},{"url":"#formsection","title":"Form.Section"},{"url":"#formlabel","title":"Form.Label"},{"url":"#forminputgroup","title":"Form.InputGroup"},{"url":"#formslot","title":"Form.Slot"},{"url":"#formerrormessage","title":"Form.ErrorMessage"},{"url":"#withfieldoption","title":"withFieldOption"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 40,\n  \"category\": \"输入类\",\n  \"title\": \"Form 表单\",\n  \"icon\": \"doc-form\",\n  \"dir\": \"column\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar ApiType = makeShortcode(\"ApiType\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5355(Form)\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6309\\u9700\\u91CD\\u7ED8\"), \"\\uFF0C\\u907F\\u514D\\u4E86\\u4E0D\\u5FC5\\u8981\\u7684\\u5168\\u91CF\\u6E32\\u67D3, \\u6027\\u80FD\\u66F4\\u9AD8\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7B80\\u5355\\u6613\\u7528\\uFF0C\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u7ED3\\u6784\\u6781\\u7B80\"), \"\\uFF0C\\u907F\\u514D\\u4E86\\u4E0D\\u5FC5\\u8981\\u7684\\u5C42\\u7EA7\\u5D4C\\u5957\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5B8C\\u5584\\u7684\\u65E0\\u969C\\u788D\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5728 Form \\u5916\\u90E8\\u53EF\\u65B9\\u4FBF\\u5730\\u83B7\\u53D6 formState / fieldState\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u63D0\\u4F9B\\u5728\\u5916\\u90E8\\u5BF9\\u8868\\u5355\\u5185\\u90E8\\u8FDB\\u884C\\u64CD\\u4F5C\\u7684\\u65B9\\u6CD5\\uFF1AformApi / fieldApi\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301\\u5C06\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u5C01\\u88C5\\u6210\\u8868\\u5355\\u63A7\\u4EF6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 Form \\u63D0\\u4F9B\\u7684\\u6269\\u5C55\\u673A\\u5236\\uFF08withField HOC\\uFF09\\u5FEB\\u6377\\u63A5\\u5165\\u81EA\\u5DF1\\u56E2\\u961F\\u7684\\u7EC4\\u4EF6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u652F\\u6301 Form level / Field level \\u7EA7\\u522B\\u7684\\u8D4B\\u503C\\u3001\\u6821\\u9A8C\\uFF08\\u540C\\u6B65/\\u5F02\\u6B65\\uFF09\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5355\\u63A7\\u4EF6(Field)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi \\u5C06\\u6240\\u6709\\u81EA\\u5E26\\u7684\\u8F93\\u5165\\u63A7\\u4EF6\\uFF08\\u6587\\u672C\\u8F93\\u5165\\u6846\\u3001\\u4E0B\\u62C9\\u9009\\u62E9\\u3001\\u590D\\u9009\\u6846\\u3001\\u5355\\u9009\\u6846\\u7B49\\uFF09\\u90FD\\u4F7F\\u7528 withField \\u5C01\\u88C5\\u4E86\\u4E00\\u6B21\\u3002\\n\\u63A5\\u7BA1\\u4E86\\u4ED6\\u4EEC\\u7684\\u6570\\u636E\\u6D41\\uFF08value & onChange\\uFF09\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F7F\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u9700\\u8981\\u4ECE Form \\u4E2D\\u5BFC\\u51FA\\uFF08\\u6CE8\\u610F\\uFF1A\\u4ECE Form \\u5BFC\\u51FA\\u7684\\u63A7\\u4EF6\\u624D\\u5177\\u6709\\u6570\\u636E\\u540C\\u6B65\\u529F\\u80FD\\uFF09\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u76EE\\u524D Form \\u63D0\\u4F9B\\u4E86\\u5982\\u4E0B\\u8868\\u5355\\u63A7\\u4EF6\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Input\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"InputNumber\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TextArea\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Select\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Checkbox\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Radio\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"RadioGroup\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Switch\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"DatePicker\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TimePicker\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Slider\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"InputGroup\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TreeSelect\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Cascader\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Rating\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"AutoComplete\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Upload\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Label\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ErrorMessage\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Section\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TagInput\"), \"\\n\\u90FD\\u6302\\u8F7D\\u5728 Form \\u4E0B\\uFF0C\\u4F7F\\u7528\\u65F6\\u76F4\\u63A5\\u4EE5<Form.Input\", \">\", \" \\u3001<Form.Select\", \">\", \"\\u58F0\\u660E\\u5373\\u53EF\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Form } from '@douyinfe/semi-ui';\\n// \\u5177\\u6709\\u6570\\u636E\\u540C\\u6B65\\u529F\\u80FD\\u7684\\u8868\\u5355\\u63A7\\u4EF6\\uFF0C\\u5728<Form></Form>\\u5185\\u4F7F\\u7528\\u65F6\\uFF0C\\u6570\\u636E\\u6D41\\u4F1A\\u88ABForm\\u81EA\\u52A8\\u63A5\\u7BA1\\n// \\u4ECEForm\\u4E2D\\u5BFC\\u51FA\\u8868\\u5355\\u63A7\\u4EF6\\u65F6\\uFF0C\\u4F60\\u8FD8\\u53EF\\u4EE5\\u8FDB\\u884C\\u91CD\\u547D\\u540D\\uFF08\\u8FD9\\u91CC\\u547D\\u540D\\u4E3AFormInput\\u4EC5\\u4EC5\\u662F\\u4E3A\\u4E86\\u5728\\u4EE5\\u4E0B\\u793A\\u4F8B\\u4E2D\\u8DDF\\u666E\\u901AInput\\u505A\\u533A\\u5206\\uFF09\\nconst FormInput = Form.Input;\\nconst FormSelect = Form.Select;\\nconst Option = FormSelect.Option;\\n// \\u666E\\u901AInput\\uFF0C\\u5728<Form></Form>\\u5185\\u90E8\\u4F7F\\u7528\\u65F6\\uFF0CForm\\u4E0D\\u4F1A\\u5BF9\\u5176\\u505A\\u4EFB\\u4F55\\u5904\\u7406\\nimport { Input } from '@douyinfe/semi-ui';\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Form \\u63D0\\u4F9B\\u7684 Field \\u7EA7\\u522B\\u7EC4\\u4EF6\\uFF0C\\u5B83\\u7684 value\\uFF08\\u6216\\u8005 valueKey \\u6307\\u5B9A\\u7684\\u5176\\u4ED6\\u5C5E\\u6027\\uFF09\\u3001onChange\\uFF08\\u6216 onKeyChangeFnName \\u6307\\u5B9A\\u7684\\u5176\\u4ED6\\u56DE\\u8C03\\u51FD\\u6570\\uFF09\\n\\u5C5E\\u6027\\u90FD\\u4F1A\\u88AB Form \\u52AB\\u6301\\uFF0C\\u6240\\u4EE5\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"1. \\u4F60\\u4E0D\\u9700\\u8981\\u4E5F\\u4E0D\\u5E94\\u8BE5\\u7528 onChange \\u6765\\u4F5C\\u540C\\u6B65\\uFF0C\\u5F53\\u7136\\u4F60\\u53EF\\u4EE5\\u7EE7\\u7EED\\u76D1\\u542C onChange \\u4E8B\\u4EF6\\u83B7\\u53D6\\u6700\\u65B0\\u7684\\u503C\"), mdx(\"div\", null, \"2. \\u4F60\\u4E0D\\u80FD\\u518D\\u7528\\u63A7\\u4EF6\\u7684`value`\\u3001`defaultValue`\\u3001`checked`\\u3001`defaultChecked`\\u7B49\\u5C5E\\u6027\\u6765\\u8BBE\\u7F6E\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u503C\\uFF0C\\u9ED8\\u8BA4\\u503C\\u53EF\\u4EE5\\u901A\\u8FC7 Field \\u7684`initValue`\\u6216\\u8005 Form \\u7684`initValues`\\u8BBE\\u7F6E\"), mdx(\"div\", null, \"3. \\u4F60\\u4E0D\\u5E94\\u8BE5\\u76F4\\u63A5\\u4FEE\\u6539 FormState \\u7684\\u503C\\uFF0C\\u6240\\u6709\\u5BF9 Form \\u5185\\u6570\\u636E\\u7684\\u4FEE\\u6539\\u90FD\\u5E94\\u8BE5\\u901A\\u8FC7\\u63D0\\u4F9B\\u7684formApi\\u3001fieldApi\\u6765\\u5B8C\\u6210\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u58F0\\u660E\\u8868\\u5355\\u7684\\u591A\\u79CD\\u5199\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi Form \\u540C\\u65F6\\u652F\\u6301\\u591A\\u79CD\\u5199\\u6CD5\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u5199\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4ECE Form \\u4E2D\\u5BFC\\u51FA\\u8868\\u5355\\u63A7\\u4EF6\\uFF0C\\u7ED9\\u8868\\u5355\\u63A7\\u4EF6\\u6DFB\\u52A0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \"\\u5C5E\\u6027\\uFF0C\\u5C06\\u5176\\u653E\\u7F6E\\u4E8E Form \\u5185\\u90E8\\u5373\\u53EF\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8FD8\\u53EF\\u4EE5\\u7ED9\\u6BCF\\u4E2A\\u8868\\u5355\\u63A7\\u4EF6\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \"\\u5C5E\\u6027\\uFF0C\\u4E0D\\u4F20\\u5165\\u65F6\\u9ED8\\u8BA4\\u4E0E field \\u76F8\\u540C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \"\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F20\\u5165\\u5B57\\u7B26\\u4E32\\uFF0C\\u4EA6\\u53EF\\u4EE5\\u4EE5 object \\u65B9\\u5F0F\\u58F0\\u660E\\uFF0C\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extra\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"required\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"optional\"), \"\\u7B49\\u5C5E\\u6027\\u5E94\\u5BF9\\u66F4\\u590D\\u6742\\u7684\\u573A\\u666F \"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"\\u5BF9\\u4E8EField\\u7EA7\\u522B\\u7EC4\\u4EF6\\u6765\\u8BF4\\uFF0Cfield \\u5C5E\\u6027\\u662F\\u5FC5\\u586B\\u9879!\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Tooltip } from '@douyinfe/semi-ui';\\nimport { IconHelpCircle } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const { Option } = Form.Select;\\n\\n    return (\\n        <Form layout='horizontal' onValueChange={values=>console.log(values)}>\\n            <Form.Input field='UserName' label='\\u7528\\u6237\\u540D' style={{ width: 80 }}/>\\n            <Form.Input\\n                field='Password'\\n                label={{ \\n                    text: '\\u5BC6\\u7801',\\n                    extra: <Tooltip content='\\u8BE6\\u60C5'><IconHelpCircle style={{ color: 'var(--semi-color-text-2)' }}/></Tooltip> \\n                }}\\n                style={{ width: 176 }}\\n            />\\n            <Form.Select field=\\\"Role\\\" label={{ text: '\\u89D2\\u8272', optional: true }} style={{ width: 176 }}>\\n                <Option value=\\\"admin\\\">\\u7BA1\\u7406\\u5458</Option>\\n                <Option value=\\\"user\\\">\\u666E\\u901A\\u7528\\u6237</Option>\\n                <Option value=\\\"guest\\\">\\u8BBF\\u5BA2</Option>\\n            </Form.Select>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301\\u7684\\u5176\\u4ED6\\u5199\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u4F60\\u9700\\u8981\\u5728 Form \\u7ED3\\u6784\\u5185\\u90E8\\u76F4\\u63A5\\u83B7\\u53D6\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formState\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"values\"), \" \\u7B49\\u503C\\u65F6\\uFF0C\\u4F60\\u8FD8\\u53EF\\u4EE5\\u4F7F\\u7528\\u4EE5\\u4E0B\\u7684\\u5199\\u6CD5\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"\\u6CE8\\u610F\\uFF0C\\u6B64\\u5904\\u83B7\\u53D6\\u7684 formState\\u3001values \\u7B49\\u5E76\\u6CA1\\u6709\\u7ECF\\u8FC7 deepClone\\u3002\\u4F60\\u5E94\\u8BE5\\u53EA\\u505A\\u8BFB\\u64CD\\u4F5C\\uFF0C\\u800C\\u4E0D\\u5E94\\u8BE5\\u505A\\u5199\\u64CD\\u4F5C\\uFF0C\\u5426\\u5219\\u4F1A\\u5BFC\\u81F4\\u4F60\\u53EF\\u80FD\\u610F\\u5916\\u4FEE\\u6539\\u4E86form\\u5185\\u90E8\\u7684\\u72B6\\u6001\\u3002\\u6240\\u6709\\u5BF9 Form \\u5185\\u90E8\\u72B6\\u6001\\u7684\\u66F4\\u65B0\\u90FD\\u5E94\\u8BE5\\u901A\\u8FC7 formApi \\u53BB\\u64CD\\u4F5C\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 render \\u5C5E\\u6027\\u4F20\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5373 render props\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <Form render={({ formState, formApi, values }) => (\\n            <>\\n                <Form.Select field=\\\"Role\\\" label='\\u89D2\\u8272' style={{ width: 176 }}>\\n                    <Form.Select.Option value=\\\"admin\\\">\\u7BA1\\u7406\\u5458</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"user\\\">\\u666E\\u901A\\u7528\\u6237</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"guest\\\">\\u8BBF\\u5BA2</Form.Select.Option>\\n                </Form.Select>\\n                <Form.Input field='UserName' label='\\u7528\\u6237\\u540D' style={{ width: 80 }}/>\\n                <Form.Input field='Password' label='\\u5BC6\\u7801' style={{ width: 176 }}/>\\n                <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>\\n            </>\\n        )} layout='horizontal' onValueChange={values=>console.log(values)}>\\n        </Form>\\n    );\\n};\\n\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 child render function\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Form \\u7684 children \\u662F\\u4E00\\u4E2A function\\uFF0Creturn \\u51FA\\u6240\\u6709\\u8868\\u5355\\u63A7\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <Form layout='horizontal' onValueChange={values=>console.log(values)}>\\n            {\\n                ({ formState, values, formApi }) => (\\n                    <>\\n                        <Form.Select field=\\\"Role\\\" label='\\u89D2\\u8272' style={{ width: 176 }}>\\n                            <Form.Select.Option value=\\\"admin\\\">\\u7BA1\\u7406\\u5458</Form.Select.Option>\\n                            <Form.Select.Option value=\\\"user\\\">\\u666E\\u901A\\u7528\\u6237</Form.Select.Option>\\n                            <Form.Select.Option value=\\\"guest\\\">\\u8BBF\\u5BA2</Form.Select.Option>\\n                        </Form.Select>\\n                        <Form.Input field='UserName' label='\\u7528\\u6237\\u540D' style={{ width: 80 }} />\\n                        <Form.Input field='Password' label='\\u5BC6\\u7801' style={{ width: 176 }}/>\\n                        <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>\\n                    </>\\n                )\\n            }\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 props.component\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 component \\u5C5E\\u6027\\u76F4\\u63A5\\u5C06\\u6574\\u4E2A\\u5185\\u90E8\\u7ED3\\u6784\\u4EE5 ReactNode \\u5F62\\u5F0F\\u4F20\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const fields = ({ formState, formApi, values }) => (\\n        <>\\n            <Form.Input field='Role' style={{ width: 176 }}/>\\n            <Form.Input field='UserName' style={{ width: 80 }}/>\\n            <Form.Input field='Password' style={{ width: 176 }}/>\\n            <code style={{ marginTop: 24 }}>{JSON.stringify(formState)}</code>\\n        </>\\n    );\\n    return <Form component={fields} layout='horizontal' onValueChange={values=>console.log(values)}/>;\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5DF2\\u652F\\u6301\\u7684\\u8868\\u5355\\u63A7\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Col, Row, Button, Space } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const initValues = {\\n        name: 'semi',\\n        business: ['ulikeCam'],\\n        role: 'ued',\\n        switch: true,\\n        files: [\\n            {\\n                uid: '1',\\n                name: 'vigo.png',\\n                status: 'success',\\n                size: '130KB',\\n                preview: true,\\n                url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/vigo.png'\\n            },\\n            {\\n                uid: '2',\\n                name: 'resso.jpeg',\\n                status: 'validateFail',\\n                size: '222KB',\\n                percent: 50,\\n                preview: true,\\n                fileInstance: new File([new ArrayBuffer(2048)], 'resso.jpeg', { type: 'image/jpeg' }),\\n                url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png'\\n            },\\n            {\\n                uid: '3',\\n                name: 'douyin.jpeg',\\n                status: 'uploading',\\n                size: '222KB',\\n                percent: 50,\\n                preview: true,\\n                fileInstance: new File([new ArrayBuffer(2048)], 'dy.jpeg', { type: 'image/jpeg' }),\\n                url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png'\\n            }\\n        ]\\n    };\\n    const { Section, Input, InputNumber, AutoComplete, Select, TreeSelect, Cascader, DatePicker, TimePicker, TextArea, CheckboxGroup, Checkbox, RadioGroup, Radio, Slider, Rating, Switch, TagInput } = Form;\\n    const plainOptions = ['A', 'B', 'C'];\\n    const style = { width: '90%' };\\n    const treeData = [\\n        {\\n            label: '\\u4E9A\\u6D32',\\n            value: 'Asia',\\n            key: '0',\\n            children: [\\n                {\\n                    label: '\\u4E2D\\u56FD',\\n                    value: 'China',\\n                    key: '0-0',\\n                    children: [\\n                        {\\n                            label: '\\u5317\\u4EAC',\\n                            value: 'Beijing',\\n                            key: '0-0-0',\\n                        },\\n                        {\\n                            label: '\\u4E0A\\u6D77',\\n                            value: 'Shanghai',\\n                            key: '0-0-1',\\n                        },\\n                    ],\\n                },\\n            ],\\n        },\\n        {\\n            label: '\\u5317\\u7F8E\\u6D32',\\n            value: 'North America',\\n            key: '1',\\n        }\\n    ];\\n\\n    return (\\n        <Form\\n            initValues={initValues}\\n            style={{ padding: 10, width: '100%' }}\\n            onValueChange={(v)=>console.log(v)}\\n        >\\n            <Section text={'\\u57FA\\u672C\\u4FE1\\u606F'}>\\n                <Row>\\n                    <Col span={12}>\\n                        <Input\\n                            field=\\\"name\\\"\\n                            label=\\\"\\u540D\\u79F0\\uFF08Input\\uFF09\\\"\\n                            initValue={'mikeya'}\\n                            style={style}\\n                            trigger='blur'\\n                        />\\n                    </Col>\\n                    <Col span={12}>\\n                        <DatePicker field=\\\"date\\\" label='\\u65E5\\u671F\\uFF08DatePicker\\uFF09' style={style} initValue={new Date()} placeholder='\\u8BF7\\u9009\\u62E9\\u751F\\u6548\\u65E5\\u671F' />\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={12}>\\n                        <Select field=\\\"role\\\" style={style} label='\\u89D2\\u8272\\uFF08Select\\uFF09' placeholder='\\u8BF7\\u9009\\u62E9\\u4F60\\u7684\\u89D2\\u8272'>\\n                            <Select.Option value=\\\"operate\\\">\\u8FD0\\u8425</Select.Option>\\n                            <Select.Option value=\\\"rd\\\">\\u5F00\\u53D1</Select.Option>\\n                            <Select.Option value=\\\"pm\\\">\\u4EA7\\u54C1</Select.Option>\\n                            <Select.Option value=\\\"ued\\\">\\u8BBE\\u8BA1</Select.Option>\\n                        </Select>\\n                    </Col>\\n                    <Col span={12}>\\n                        <Select\\n                            field=\\\"business\\\"\\n                            multiple\\n                            style={style}\\n                            placeholder='\\u8BF7\\u9009\\u62E9\\u4E1A\\u52A1\\u7EBF'\\n                            label=\\\"\\u4E1A\\u52A1\\u7EBF\\uFF08\\u591A\\u9009Select\\uFF09\\\"\\n                            extraText={\\n                                <div style={{\\n                                    color: 'rgba(var(--semi-blue-5), 1)',\\n                                    fontSize: 14,\\n                                    userSelect: 'none',\\n                                    cursor: 'pointer'\\n                                }}>\\n                                    \\u6CA1\\u6709\\u627E\\u5230\\u5408\\u9002\\u7684\\u4E1A\\u52A1\\u7EBF\\uFF1F\\n                                </div>\\n                            }\\n                        >\\n                            <Select.Option value=\\\"abc\\\">Semi</Select.Option>\\n                            <Select.Option value=\\\"ulikeCam\\\">\\u8F7B\\u989C\\u76F8\\u673A</Select.Option>\\n                            <Select.Option value=\\\"toutiao\\\">\\u4ECA\\u65E5\\u5934\\u6761</Select.Option>\\n                        </Select>\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={12}>\\n                        <Form.Cascader\\n                            placeholder=\\\"\\u8BF7\\u9009\\u62E9\\u6240\\u5728\\u5730\\u533A\\\"\\n                            treeData={treeData}\\n                            field='area'\\n                            label='\\u5730\\u533A\\uFF08Cascader\\uFF09'\\n                            style={style}\\n                        >\\n                        </Form.Cascader>\\n                    </Col>\\n                    <Col span={12}>\\n                        <Form.TreeSelect\\n                            field=\\\"tree\\\"\\n                            style={style}\\n                            label='\\u8282\\u70B9\\uFF08TreeSelect\\uFF09'\\n                            placeholder='\\u8BF7\\u9009\\u62E9\\u670D\\u52A1\\u8282\\u70B9'\\n                            treeData={treeData}\\n                            filterTreeNode\\n                        >\\n                        </Form.TreeSelect>\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={12}>\\n                        <TagInput \\n                            field=\\\"product\\\"\\n                            label='\\u4EA7\\u54C1\\uFF08TagInput\\uFF09'\\n                            initValue={['abc', 'ulikeCam']}\\n                            placeholder='\\u8BF7\\u8F93\\u5165\\u4EA7\\u54C1'\\n                            style={style}\\n                        />\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={24}>\\n                        <Form.Upload\\n                            field='files'\\n                            label='\\u8BC1\\u660E\\u6587\\u4EF6\\uFF08Upload\\uFF09'\\n                            action='//semi.design/api/upload'\\n                        >\\n                            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                                \\u70B9\\u51FB\\u4E0A\\u4F20\\n                            </Button>\\n                        </Form.Upload>\\n                    </Col>\\n                </Row>\\n            </Section>\\n            <Section text='\\u8D44\\u6E90\\u8BE6\\u60C5'>\\n                <Row>\\n                    <Col span={12}>\\n                        <TextArea\\n                            style={{ ...style, height: 120 }}\\n                            field='description'\\n                            label='\\u7533\\u8BF7\\u7406\\u7531\\uFF08TextArea\\uFF09'\\n                            placeholder='\\u8BF7\\u586B\\u5199\\u7533\\u8BF7\\u8D44\\u6E90\\u7406\\u7531'\\n                        />\\n                    </Col>\\n                    <Col span={12}>\\n                        <CheckboxGroup\\n                            field=\\\"type\\\"\\n                            direction='horizontal'\\n                            label='\\u7533\\u8BF7\\u7C7B\\u578B\\uFF08CheckboxGroup\\uFF09'\\n                            initValue={['user', 'admin']}\\n                            rules={[\\n                                { required: true }\\n                            ]}\\n                        >\\n                            <Checkbox value=\\\"admin\\\">admin</Checkbox>\\n                            <Checkbox value=\\\"user\\\">user</Checkbox>\\n                            <Checkbox value=\\\"guest\\\">guest</Checkbox>\\n                            <Checkbox value=\\\"root\\\">root</Checkbox>\\n                        </CheckboxGroup>\\n                        <RadioGroup field=\\\"isMonopolize\\\" label='\\u662F\\u5426\\u72EC\\u5360\\u8D44\\u6E90\\uFF08Radio\\uFF09' rules={[\\n                            { type: 'boolean' },\\n                            { required: true, message: '\\u5FC5\\u987B\\u9009\\u62E9\\u662F\\u5426\\u72EC\\u5360 ' }\\n                        ]}>\\n                            <Radio value={1}>\\u662F</Radio>\\n                            <Radio value={0}>\\u5426</Radio>\\n                        </RadioGroup>\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={12}>\\n                        <TimePicker field=\\\"time\\\" label='\\u622A\\u6B62\\u65F6\\u523B\\uFF08TimePicker\\uFF09' style={{ width: '90%' }}/>\\n                    </Col>\\n                    <Col span={12}>\\n                        <InputNumber field='number' label='\\u7533\\u8BF7\\u6570\\u91CF\\uFF08InputNumber\\uFF09' initValue={20} style={style}/>\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={12}>\\n                        <Slider field=\\\"range\\\" label='\\u8D44\\u6E90\\u4F7F\\u7528\\u62A5\\u8B66\\u9608\\u503C(%)\\uFF08Slider\\uFF09' initValue={10} style={{ width: '90%' }}/>\\n                    </Col>\\n                    <Col span={12}>\\n                        <Switch field='switch' label='\\u5F00\\u5173(Switch)'/>\\n                    </Col>\\n                </Row>\\n                <Row>\\n                    <Col span={12}>\\n                        <Rating field=\\\"rating\\\" label='\\u6EE1\\u610F\\u5EA6(Rating)' initValue={2} style={{ width: '90%' }}/>\\n                    </Col>\\n                </Row>\\n            </Section>\\n            <Checkbox value=\\\"false\\\" field=\\\"agree\\\" noLabel={true}>\\n                \\u6211\\u5DF2\\u9605\\u8BFB\\u5E76\\u6E05\\u695A\\u76F8\\u5173\\u89C4\\u5B9A\\uFF08Checkbox\\uFF09\\n            </Checkbox>\\n            <Space>\\n                <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\u63D0\\u4EA4(submit)</Button>\\n                <Button htmlType=\\\"reset\\\">\\u91CD\\u7F6E(reset)</Button>\\n            </Space>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5355\\u63A7\\u4EF6\\u503C\\u7684\\u7ED1\\u5B9A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6BCF\\u4E2A\\u8868\\u5355\\u63A7\\u4EF6\\u90FD\\u9700\\u8981\\u4EE5\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \"\\u5C5E\\u6027\\u7ED1\\u5B9A\\u4E00\\u4E2A\\u5B57\\u6BB5\\u540D\\u79F0\\uFF0C\\u7528\\u4E8E\\u5C06\\u8868\\u5355\\u9879\\u7684\\u503C\\u6B63\\u786E\\u6620\\u5C04\\u5230\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"FormState\"), \" values / errors / touched \\u4E2D\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5B57\\u6BB5\\u53EF\\u4EE5\\u662F\\u7B80\\u5355\\u7684\\u5B57\\u7B26\\u4E32\\uFF0C\\u53EF\\u4EE5\\u662F\\u5305\\u542B\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".\"), \"\\u6216\\u8005\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[]\"), \"\\u7684\\u5B57\\u7B26\\u4E32, \\u652F\\u6301\\u591A\\u7EA7\\u5D4C\\u5957\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4E0B\\u9762\\u662F\\u5B57\\u6BB5\\u540D\\u79F0\\u4EE5\\u53CA\\u4ED6\\u4EEC\\u5728 FormState \\u4E2D\\u7684\\u6620\\u5C04\\u8DEF\\u5F84\\u7684\\u793A\\u4F8B\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Field\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Resolution\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"username\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.username\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"user\", \"[\", \"0\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.user\", \"[\", \"0\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"siblings.1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.siblings\", \"[\", \"1\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"siblings\", \"[\", \"'2'\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.siblings\", \"[\", \"2\", \"]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"parents\", \"[\", \"0\", \"]\", \".name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.parents\", \"[\", \"0\", \"]\", \".name\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"parents\", \"[\", \"1\", \"]\", \"[\", \"'name'\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formState.values.parents\", \"[\", \"1\", \"]\", \".name\")))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form, Toast, Row, Col, TextArea } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form\\n        onSubmit={values => Toast.info({ content: JSON.stringify(values) })}\\n    >\\n        {\\n            ({ formState, values, formApi }) => (\\n                <Row>\\n                    <Col span={12}>\\n                        <Form.Input field='username' placeholder='\\u8BF7\\u5C1D\\u8BD5\\u8F93\\u5165\\u503C'/>\\n                        <Form.Input field='user[0]' placeholder='\\u8BF7\\u5C1D\\u8BD5\\u8F93\\u5165\\u503C'/>\\n                        <Form.Input field='siblings.1' placeholder='\\u8BF7\\u5C1D\\u8BD5\\u8F93\\u5165\\u503C'/>\\n                        <Form.Input field=\\\"siblings['2']\\\" placeholder='\\u8BF7\\u5C1D\\u8BD5\\u8F93\\u5165\\u503C'/>\\n                        <Form.Input field='parents[0].name' placeholder='\\u8BF7\\u5C1D\\u8BD5\\u8F93\\u5165\\u503C'/>\\n                        <Form.Input field=\\\"parents[1]['name']\\\" placeholder='\\u8BF7\\u5C1D\\u8BD5\\u8F93\\u5165\\u503C'/>\\n                    </Col>\\n                    <Col span={10} offset={1} style={{ marginTop: 12 }}>\\n                        <Form.Label text='FormState\\u5B9E\\u65F6\\u6620\\u5C04\\u503C\\uFF1A'></Form.Label>\\n                        <TextArea value={JSON.stringify(formState.values)}></TextArea>\\n                    </Col>\\n                </Row>\\n            )\\n        }\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5355\\u5E03\\u5C40\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5782\\u76F4\\u5E03\\u5C40\\uFF1A\\u8868\\u5355\\u63A7\\u4EF6\\u4E4B\\u95F4\\u4E0A\\u4E0B\\u5782\\u76F4\\u6392\\u5217\\uFF08\\u9ED8\\u8BA4\\uFF09\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"Semi Design \\u66F4\\u63A8\\u8350\\u8868\\u5355\\u91C7\\u7528\\u5782\\u76F4\\u5E03\\u5C40\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Toast, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const handleSubmit = (values) => {\\n        console.log(values);\\n        Toast.info('\\u8868\\u5355\\u5DF2\\u63D0\\u4EA4');\\n    };\\n    return (\\n        <Form onSubmit={values => handleSubmit(values)} style={{ width: 400 }}>\\n            {({ formState, values, formApi }) => (\\n                <>\\n                    <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>\\n                    <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>\\n                    <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>\\n                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\\n                        <p>\\n                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>\\n                        </p>\\n                        <Button disabled={!values.agree} htmlType='submit' type=\\\"tertiary\\\">Log in</Button>\\n                    </div>\\n                </>\\n            )}\\n        </Form>\\n    );\\n};\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6C34\\u5E73\\u5E03\\u5C40\\uFF1A\\u8868\\u5355\\u63A7\\u4EF6\\u4E4B\\u95F4\\u6C34\\u5E73\\u6392\\u5217\\n\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"layout='horizontal'\"), \"\\u6765\\u4F7F\\u7528\\u6C34\\u5E73\\u5E03\\u5C40\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form layout='horizontal'>\\n        <Form.Input field='phone' label='PhoneNumber' placeholder='Enter your phone number'></Form.Input>\\n        <Form.Input field='password' label='Password' placeholder='Enter your password'></Form.Input>\\n    </Form>\\n);\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"labelPosition\\u3001labelAlign\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E labelPosition\\u3001labelAlign \\u63A7\\u5236 label \\u5728 Field \\u4E2D\\u51FA\\u73B0\\u7684\\u4F4D\\u7F6E\\uFF0C\\u6587\\u672C\\u5BF9\\u9F50\\u7684\\u65B9\\u5411\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Select } from '@douyinfe/semi-ui';\\n\\nclass BasicDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            labelPosition: 'left',\\n            labelAlign: 'left',\\n            labelWidth: '180px'\\n        };\\n        this.changeLabelPos = this.changeLabelPos.bind(this);\\n        this.changeLabelAlign = this.changeLabelAlign.bind(this);\\n    }\\n\\n\\n    changeLabelPos(labelPosition) {\\n        let labelWidth;\\n        labelPosition === 'left' ? labelWidth = '180px' : labelWidth = 'auto';\\n        this.setState({ labelPosition, labelWidth });\\n    }\\n\\n    changeLabelAlign(labelAlign) { this.setState({ labelAlign }); }\\n\\n    render() {\\n        const { labelPosition, labelAlign, labelWidth } = this.state;\\n        return (\\n            <>\\n                <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 12 }}>\\n                    <Form.Label style={{ marginLeft: 10 }}>\\u5207\\u6362Label\\u4F4D\\u7F6E:</Form.Label>\\n                    <Select onChange={this.changeLabelPos} value={labelPosition} style={{ width: 200 }} prefix='labelPosition'>\\n                        <Select.Option value='top'>top</Select.Option>\\n                        <Select.Option value='left'>left</Select.Option>\\n                    </Select>\\n                    <Form.Label style={{ marginLeft: 10 }}>\\u5207\\u6362Label\\u6587\\u672C\\u5BF9\\u9F50\\u65B9\\u5411:</Form.Label>\\n                    <Select onChange={this.changeLabelAlign} value={labelAlign} style={{ width: 200 }} prefix='labelAlign'>\\n                        <Select.Option value='left'>left</Select.Option>\\n                        <Select.Option value='right'>right</Select.Option>\\n                    </Select>\\n                </div>\\n                <Form\\n                    labelPosition={labelPosition}\\n                    labelWidth={labelWidth}\\n                    labelAlign={labelAlign}\\n                    key={labelPosition + labelAlign}\\n                    style={{ padding: '10px', width: 600 }}>\\n                    <Form.Input\\n                        field=\\\"input\\\"\\n                        label=\\\"\\u624B\\u673A\\u53F7\\u7801\\\"\\n                        trigger='blur'\\n                        style={{ width: 200 }}\\n                        rules={[\\n                            { required: true, message: 'required error' },\\n                            { type: 'string', message: 'type error' },\\n                            { validator: (rule, value) => value === 'semi', message: 'should be semi' }\\n                        ]}\\n                    />\\n                    <Form.Switch label=\\\"\\u662F\\u5426\\u540C\\u610F\\\" field='agree'/>\\n                    <Form.InputNumber field='price' label='\\u4EF7\\u683C' style={{ width: 200 }}/>\\n                    <Form.Select label=\\\"\\u59D3\\u540D\\\" field='name' style={{ width: 200 }}>\\n                        <Form.Select.Option value=\\\"mike\\\">mike</Form.Select.Option>\\n                        <Form.Select.Option value=\\\"jane\\\">jane</Form.Select.Option>\\n                        <Form.Select.Option value=\\\"kate\\\">kate</Form.Select.Option>\\n                    </Form.Select>\\n                    <Form.CheckboxGroup label=\\\"\\u89D2\\u8272\\\" field='role' direction='horizontal'>\\n                        <Form.Checkbox value=\\\"admin\\\">admin</Form.Checkbox>\\n                        <Form.Checkbox value=\\\"user\\\">user</Form.Checkbox>\\n                        <Form.Checkbox value=\\\"guest\\\">guest</Form.Checkbox>\\n                        <Form.Checkbox value=\\\"root\\\">root</Form.Checkbox>\\n                    </Form.CheckboxGroup>\\n                    <Form.RadioGroup field=\\\"\\u6027\\u522B\\\">\\n                        <Form.Radio value=\\\"1\\\">man</Form.Radio>\\n                        <Form.Radio value=\\\"2\\\">woman</Form.Radio>\\n                    </Form.RadioGroup>\\n                </Form>\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u66F4\\u590D\\u6742\\u7684\\u5E03\\u5C40\\n\\u4F60\\u8FD8\\u53EF\\u4EE5\\u7ED3\\u5408 Grid \\u63D0\\u4F9B\\u7684 Row\\u3001Col\\uFF0C\\u6765\\u5BF9\\u8868\\u5355\\u8FDB\\u884C\\u4F60\\u60F3\\u8981\\u7684\\u6392\\u5217\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form\\n        labelPosition='top'\\n        getFormApi={this.getFormApi}\\n        style={{ padding: '10px' }}>\\n        <Row>\\n            <Col span={8}>\\n                <Form.Input\\n                    field=\\\"nickName1\\\"\\n                    label=\\\"\\u7528\\u6237\\u540D\\\"\\n                    style={{ width: '250px' }}\\n                    trigger='blur'\\n                    rules={[\\n                        { required: true, message: 'required error' },\\n                        { type: 'string', message: 'type error' },\\n                        { validator: (rule, value) => value === 'semi', message: 'should be semi' }\\n                    ]}\\n                />\\n            </Col>\\n            <Col span={8}>\\n                <Form.DatePicker field='date1' label='\\u6709\\u6548\\u65E5\\u671F' style={{ width: '250px' }}/>\\n            </Col>\\n            <Col span={8}>\\n                <Form.Select label=\\\"\\u4E1A\\u52A1\\u7EBF\\\" field='business1' style={{ width: '250px' }}>\\n                    <Form.Select.Option value=\\\"abc\\\">Semi</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"ulikeCam\\\">\\u8F7B\\u989C\\u76F8\\u673A</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"toutiao\\\">\\u4ECA\\u65E5\\u5934\\u6761</Form.Select.Option>\\n                </Form.Select>\\n            </Col>\\n        </Row>\\n        <Row>\\n            <Col span={6}>\\n                <Form.Input\\n                    field=\\\"nickName2\\\"\\n                    label=\\\"\\u7528\\u6237\\u540D\\\"\\n                    style={{ width: '200px' }}\\n                    trigger='blur'\\n                    rules={[\\n                        { required: true, message: 'required error' },\\n                        { type: 'string', message: 'type error' },\\n                        { validator: (rule, value) => value === 'semi', message: 'should be semi' }\\n                    ]}\\n                />\\n            </Col>\\n            <Col span={6}>\\n                <Form.DatePicker field='date2' label='\\u6709\\u6548\\u65E5\\u671F' style={{ width: '200px' }}/>\\n            </Col>\\n            <Col span={6}>\\n                <Form.Select label=\\\"\\u4E1A\\u52A1\\u7EBF\\\" field='business2' style={{ width: '200px' }}>\\n                    <Form.Select.Option value=\\\"abc\\\">Semi</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"ulikeCam\\\">\\u8F7B\\u989C\\u76F8\\u673A</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"toutiao\\\">\\u4ECA\\u65E5\\u5934\\u6761</Form.Select.Option>\\n                </Form.Select>\\n            </Col>\\n            <Col span={6}>\\n                <Form.Select field=\\\"role\\\" label='\\u89D2\\u8272' style={{ width: '200px' }}>\\n                    <Form.Select.Option value=\\\"operate\\\">\\u8FD0\\u8425</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"rd\\\">\\u5F00\\u53D1</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"pm\\\">\\u4EA7\\u54C1</Form.Select.Option>\\n                    <Form.Select.Option value=\\\"ued\\\">\\u8BBE\\u8BA1</Form.Select.Option>\\n                </Form.Select>\\n            </Col>\\n        </Row>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5355\\u5206\\u7EC4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u6BB5\\u6570\\u91CF\\u8F83\\u591A\\u7684\\u8868\\u5355\\u5E94\\u8003\\u8651\\u5BF9\\u5B57\\u6BB5\\u8FDB\\u884C\\u5206\\u7EC4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.Section\"), \"\\u5BF9 Fields \\u8FDB\\u884C\\u5206\\u7EC4\\uFF08\\u4EC5\\u5F71\\u54CD\\u5E03\\u5C40\\uFF0C\\u4E0D\\u4F1A\\u5F71\\u54CD\\u6570\\u636E\\u7ED3\\u6784\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Button, Space } from '@douyinfe/semi-ui';\\n    \\n() => {\\n    const { Section, Input, DatePicker, TimePicker, Select, Switch, InputNumber, Checkbox, CheckboxGroup, RadioGroup, Radio } = Form;\\n    return (\\n        <Form style={{ width: 560 }}>\\n            <Section text={'\\u57FA\\u672C\\u4FE1\\u606F'}>\\n                <Input field='name' label='\\u8003\\u8BD5\\u540D\\u79F0' initValue='TCS\\u4EFB\\u52A1\\u5E73\\u53F0\\u4F7F\\u7528' style={{ width: 560 }}/>\\n            </Section>\\n            <Section text={'\\u5408\\u683C\\u6807\\u51C6'} >\\n                <div style={{ display: 'flex' }}>\\n                    <InputNumber field='pass' initValue={60} style={{ width: 80 }} label={{ text: '\\u53CA\\u683C\\u6B63\\u786E\\u7387', required: true }}/>\\n                    <InputNumber field='number' initValue={10} style={{ width: 80 }} label={{ text: '\\u5408\\u683C\\u4EBA\\u6570', required: true }}/>\\n                </div>\\n            </Section>\\n            <Section text={'\\u8003\\u8BD5\\u65F6\\u95F4'} >\\n                <DatePicker field='date' type='dateTime' initValue={new Date()} style={{ width: 272 }} label={{ text: '\\u5F00\\u59CB\\u65F6\\u95F4', required: true }}/>\\n                <div style={{ display: 'flex' }}>\\n                    <Input field='time' label='\\u8003\\u8BD5\\u65F6\\u957F' style={{ width: 176 }} initValue={'60'} addonAfter='\\u5206\\u949F'/>\\n                    <Checkbox initValue={true} noLabel field='auto' style={{ paddingTop: 30, marginLeft: 12 }}>\\u5230\\u65F6\\u95F4\\u81EA\\u52A8\\u4EA4\\u5377</Checkbox>\\n                </div>\\n                <RadioGroup\\n                    field=\\\"type\\\"\\n                    label='\\u6709\\u6548\\u65F6\\u95F4'\\n                    direction='vertical'\\n                    initValue={'always'}\\n                >\\n                    <Radio value=\\\"always\\\">\\u6C38\\u4E45\\u6709\\u6548</Radio>\\n                    <Radio value=\\\"user\\\">\\u81EA\\u5B9A\\u4E49\\u6709\\u6548\\u671F</Radio>\\n                </RadioGroup>\\n                <RadioGroup\\n                    field=\\\"answerTime\\\"\\n                    label='\\u7B54\\u6848\\u653E\\u51FA\\u65F6\\u95F4'\\n                    direction='vertical'\\n                    initValue={'always'}\\n                    rules={[\\n                        { required: true }\\n                    ]}\\n                >\\n                    <Radio value=\\\"always\\\">\\u81EA\\u52A8\\u653E\\u51FA</Radio>\\n                    <Radio value=\\\"user\\\">\\n                        <div style={{ display: 'inline-block' }}>\\n                            \\u81EA\\u5B9A\\u4E49\\u653E\\u51FA\\u65F6\\u95F4\\n                            <Form.DatePicker type='dateTimeRange' noLabel field='customTime' style={{ width: 464, display: 'inline-block' }}/>\\n                        </div>\\n                    </Radio>\\n                </RadioGroup>\\n            </Section>\\n            <Section text={'\\u8003\\u8BD5\\u4EBA\\u5458'}>\\n                <div style={{ display: 'flex' }}>\\n                    <Switch field='open' label={{ text: '\\u5BF9\\u5916\\u5F00\\u653E', required: true }} checkedText='\\u5F00' uncheckedText='\\u5173'></Switch>\\n                </div>\\n                <Select\\n                    field='users'\\n                    label={{ text: '\\u8003\\u751F', required: true }}\\n                    style={{ width: 560 }}\\n                    multiple\\n                    initValue={['1', '2', '3', '4']}\\n                >\\n                    <Select.Option value='1'>\\u66F2\\u6668\\u4E00</Select.Option>\\n                    <Select.Option value='2'>\\u590F\\u53EF\\u66FC</Select.Option>\\n                    <Select.Option value='3'>\\u66F2\\u6668\\u4E09</Select.Option>\\n                    <Select.Option value='4'>\\u8521\\u598D</Select.Option>\\n                </Select>\\n            </Section>\\n            <Space>\\n                <Button type='primary' theme='solid' style={{ width: 120, marginTop: 12, marginRight: 4 }}>\\u521B\\u5EFA\\u8003\\u8BD5</Button>\\n                <Button style={{ marginTop: 12 }}>\\u9884\\u89C8</Button>\\n            </Space>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"wrapperCol / labelCol\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9700\\u8981\\u4E3A Form \\u5185\\u7684\\u6240\\u6709 Field \\u8BBE\\u7F6E\\u7EDF\\u4E00\\u7684\\u5E03\\u5C40\\u65F6\\uFF0C\\u53EF\\u4EE5\\u5728 Form \\u4E0A\\u8BBE\\u7F6E wrapperCol \\u3001labelCol \\u5FEB\\u901F\\u751F\\u6210\\u5E03\\u5C40\\uFF0C\\u65E0\\u9700\\u624B\\u52A8\\u4F7F\\u7528 Row\\u3001Col \\u624B\\u52A8\\u5E03\\u5C40\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wrapperCol\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelCol\"), \"\\u5C5E\\u6027\\u914D\\u7F6E\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/grid#Col\"\n  }, \"Col \\u7EC4\\u4EF6\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form\\n        wrapperCol={{ span: 20 }}\\n        labelCol={{ span: 2 }}\\n        labelPosition='left'\\n        labelAlign='right'\\n    >\\n        <Form.Input field='name' style={{ width: 250 }} label='\\u59D3\\u540D' trigger='blur' placeholder='\\u8BF7\\u8F93\\u5165\\u59D3\\u540D'/>\\n        <Form.Select field=\\\"role\\\" label='\\u89D2\\u8272' placeholder='\\u8BF7\\u9009\\u62E9\\u89D2\\u8272' style={{ width: 250 }}>\\n            <Form.Select.Option value=\\\"operate\\\">\\u8FD0\\u8425</Form.Select.Option>\\n            <Form.Select.Option value=\\\"rd\\\">\\u5F00\\u53D1</Form.Select.Option>\\n            <Form.Select.Option value=\\\"pm\\\">\\u4EA7\\u54C1</Form.Select.Option>\\n            <Form.Select.Option value=\\\"ued\\\">\\u8BBE\\u8BA1</Form.Select.Option>\\n        </Form.Select>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9690\\u85CFLabel\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Form \\u4F1A\\u81EA\\u52A8\\u4E3A Field \\u63A7\\u4EF6\\u63D2\\u5165 Label\\u3002\\u5982\\u679C\\u4F60\\u4E0D\\u9700\\u8981\\u81EA\\u52A8\\u63D2\\u5165 Label \\u6A21\\u5757, \\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 Field \\u4E2D\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"noLabel=true\"), \"\\u5C06\\u81EA\\u52A8\\u63D2\\u5165 Label \\u529F\\u80FD\\u5173\\u95ED\\uFF08\\u6B64\\u65F6 Field \\u4ECD\\u7136\\u5177\\u5907\\u81EA\\u52A8\\u5C55\\u793A ErrorMessage \\u7684\\u80FD\\u529B\\uFF0C\\u56E0\\u6B64 DOM \\u7ED3\\u6784\\u4E0E\\u539F\\u59CB\\u63A7\\u4EF6\\u4F9D\\u7136\\u4F1A\\u6709\\u533A\\u522B\\uFF09\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u679C\\u4F60\\u5E0C\\u671B\\u4E0E\\u539F\\u59CB\\u63A7\\u4EF6\\u4FDD\\u6301 DOM \\u7ED3\\u6784\\u4E00\\u81F4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 pure=true\\uFF0C\\u6B64\\u65F6\\u9664\\u4E86\\u6570\\u636E\\u6D41\\u88AB\\u63A5\\u7BA1\\u5916\\uFF0CDOM\\u7ED3\\u6784\\u4E0D\\u4F1A\\u6709\\u4EFB\\u4F55\\u53D8\\u5316\\uFF08\\u4F60\\u9700\\u8981\\u81EA\\u884C\\u8D1F\\u8D23 ErrorMessage\\u7684\\u6E32\\u67D3\\uFF0C\\u540C\\u65F6\\u5B83\\u4E5F\\u65E0\\u6CD5\\u88AB formProps.wrapperCol \\u5C5E\\u6027\\u5F71\\u54CD\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form onSubmit={(values) => console.log(values)} style={{ width: 400 }}>\\n        <Form.Input field='name' label='\\u59D3\\u540D' trigger='blur' noLabel={true} style={{ width: 250 }} placeholder='\\u8BF7\\u8F93\\u5165\\u59D3\\u540D'/>\\n        <Form.Input field='purename' pure placeholder='DOM\\u7ED3\\u6784\\u4E0E\\u666E\\u901A Input \\u7EC4\\u4EF6\\u5B8C\\u5168\\u4E00\\u81F4'/>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5185\\u5D4C Label\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u5C06 labelPosition \\u8BBE\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"inset\"), \"\\uFF0C\\u53EF\\u4EE5\\u5C06 Label \\u5185\\u5D4C\\u5728\\u8868\\u5355\\u63A7\\u4EF6\\u4E2D\\u3002\\u76EE\\u524D\\u652F\\u6301\\u8FD9\\u9879\\u529F\\u80FD\\u7684\\u7EC4\\u4EF6\\u6709\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Input\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"InputNumber\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"DatePicker\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TimePicker\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Select\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TreeSelect\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Cascader\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TagInput\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form labelPosition='inset' layout='horizontal'>\\n        <Form.Input field='name' label='\\u59D3\\u540D' trigger='blur' style={{ width: 250 }} placeholder='\\u8BF7\\u8F93\\u5165\\u59D3\\u540D' initValue='semi'/>\\n        <Form.Select field=\\\"role\\\" label='\\u89D2\\u8272' style={{ width: '250px' }} initValue='rd'>\\n            <Form.Select.Option value=\\\"operate\\\">\\u8FD0\\u8425</Form.Select.Option>\\n            <Form.Select.Option value=\\\"rd\\\">\\u5F00\\u53D1</Form.Select.Option>\\n            <Form.Select.Option value=\\\"pm\\\">\\u4EA7\\u54C1</Form.Select.Option>\\n            <Form.Select.Option value=\\\"ued\\\">\\u8BBE\\u8BA1</Form.Select.Option>\\n        </Form.Select>\\n        <Form.DatePicker field=\\\"date\\\" label='\\u5F00\\u59CB\\u65E5\\u671F' style={{ width: '250px' }} initValue={new Date()}>\\n        </Form.DatePicker>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BFC\\u51FA Label\\u3001ErrorMessage \\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u9700\\u8981 Form.Label\\u3001Form.ErrorMessage \\u6A21\\u5757\\u81EA\\u884C\\u7EC4\\u5408\\u4F7F\\u7528\\uFF0C\\u53EF\\u4EE5\\u4ECE Form \\u4E2D\\u5BFC\\u51FA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Label \\u7684 API \\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#Form.Label\"\n  }, \"Label\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ErrorMessage \\u7684 API \\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#Form.ErrorMessage\"\n  }, \"ErrorMessage\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F8B\\u5982\\uFF1A\\u5F53\\u81EA\\u5E26\\u7684 Label\\u3001ErrorMessage \\u5E03\\u5C40\\u4E0D\\u6EE1\\u8DB3\\u4E1A\\u52A1\\u9700\\u6C42\\uFF0C\\u9700\\u8981\\u81EA\\u884C\\u7EC4\\u5408\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u53C8\\u5E0C\\u671B\\u80FD\\u76F4\\u63A5\\u4F7F\\u7528 Label\\u3001ErrorMessage \\u7684\\u9ED8\\u8BA4\\u6837\\u5F0F\\u65F6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Label, ErrorMessage } = Form;\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 Form.Slot \\u653E\\u7F6E\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u4F60\\u7684\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\uFF0C\\u9700\\u8981\\u4E0E Field \\u7EC4\\u4EF6\\u4FDD\\u6301\\u540C\\u6837\\u7684\\u5E03\\u5C40\\u6837\\u5F0F\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 Form.Slot \\u653E\\u7F6E\\u4F60\\u7684\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5728 Form \\u7EC4\\u4EF6\\u4E0A\\u8BBE\\u7F6E\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelWidth\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelAlign\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"wrapperCol\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"labelCol\"), \" \\u4F1A\\u81EA\\u52A8\\u4F5C\\u7528\\u5728 Form.Slot \\u4E0A\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Slot \\u5C5E\\u6027\\u914D\\u7F6E\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Form.Slot\"\n  }, \"Form.Slot\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\nclass AssistComponent extends React.Component {\\n    render() {\\n        return (\\n            <Form\\n                onChange={v=>console.log(v)}\\n                onSubmit={v=>console.log(v)}\\n                style={{ width: 600 }}\\n                labelPosition='left'\\n                labelWidth={100}\\n            >\\n                <Form.Input field='\\u7279\\u6548\\u540D\\u79F0' style={{ width: 250 }}/>\\n                <Form.Slot label={{ text: 'SlotA' }} error='\\u6211\\u662FSlotA\\u7684ErrorMessage'>\\n                    <div style={{ display: 'flex', alignItems: 'center', height: 32, marginTop: 8 }}>\\n                        \\u6211\\u662FSemi Form SlotA, \\u6211\\u662F\\u81EA\\u5B9A\\u4E49\\u7684ReactNode\\n                    </div>\\n                </Form.Slot>\\n                <Form.Slot label={{ text: 'SlotB', width: 160, align: 'right' }}>\\n                    <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>\\n                        \\u6211\\u662FSemi Form SlotB, \\u6211\\u7684Label Align\\u3001Width\\u4E0E\\u4F17\\u4E0D\\u540C\\n                    </div>\\n                </Form.Slot>\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 helpText\\u3001extraText \\u653E\\u7F6E\\u63D0\\u793A\\u4FE1\\u606F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"helpText\"), \"\\u653E\\u7F6E\\u81EA\\u5B9A\\u4E49\\u63D0\\u793A\\u4FE1\\u606F\\uFF0C\\u4E0E\\u6821\\u9A8C\\u4FE1\\u606F\\uFF08error\\uFF09\\u516C\\u7528\\u540C\\u4E00\\u533A\\u5757\\u5C55\\u793A\\uFF0C\\u4E24\\u8005\\u5747\\u6709\\u503C\\u65F6\\uFF0C\\u4F18\\u5148\\u5C55\\u793A\\u6821\\u9A8C\\u4FE1\\u606F\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extraText\"), \"\\u653E\\u7F6E\\u989D\\u5916\\u7684\\u63D0\\u793A\\u4FE1\\u606F\\uFF0C\\u5F53\\u9700\\u8981\\u9519\\u8BEF\\u4FE1\\u606F\\u548C\\u63D0\\u793A\\u6587\\u6848\\u540C\\u65F6\\u51FA\\u73B0\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8FD9\\u4E2A\\u914D\\u7F6E\\uFF0C\\u5E38\\u663E\\uFF0C\\u4F4D\\u4E8E helpText/error \\u540E\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53\\u4F20\\u5165 validateStatus \\u65F6\\uFF0C\\u4F18\\u5148\\u5C55\\u793A validateStatus \\u503C\\u5BF9\\u5E94\\u7684 UI \\u6837\\u5F0F\\u3002\\u4E0D\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5 field \\u5185\\u90E8\\u6821\\u9A8C\\u72B6\\u6001\\u4E3A\\u51C6\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [helpText, setHelpText] = useState('');\\n    const [validateStatus, setValidateStatus] = useState('default');\\n    const formRef = useRef();\\n\\n    const validate = (val, values) => {\\n        if (!val) {\\n            setValidateStatus('error');\\n            return <span>\\u5BC6\\u7801\\u4E0D\\u80FD\\u4E3A\\u7A7A</span>;\\n        } else if (val && val.length <= 3) {\\n            setValidateStatus('warning');\\n            setHelpText(<span style={{ color: 'var(--semi-color-warning)' }}>\\u5BC6\\u7801\\u5F3A\\u5EA6\\uFF1A\\u5F31</span>); // show helpText\\n            return ''; // validate pass\\n        } else {\\n            setHelpText('');\\n            setValidateStatus('success');\\n            return '';\\n        }\\n    };\\n\\n    const random = () => {\\n        let pw = (Math.random() * 100000).toString().slice(0, 5);\\n        formRef.current.formApi.setValue('Password', pw);\\n        formRef.current.formApi.setError('Password', '');\\n        setHelpText('');\\n        setValidateStatus('success');\\n    };\\n\\n    return (\\n        <Form\\n            showValidateIcon={true}\\n            ref={formRef}\\n            onSubmit={(value) => console.log('submit success')}\\n            onSubmitFail={(errors) => console.log(errors)}\\n        >\\n            <Form.Input\\n                validate={validate}\\n                field=\\\"Password\\\"\\n                validateStatus={validateStatus}\\n                helpText={helpText}\\n                extraText={\\n                    <div\\n                        style={{\\n                            color: 'var(--semi-color-link)',\\n                            fontSize: 14,\\n                            userSelect: 'none',\\n                            cursor: 'pointer'\\n                        }}\\n                        onClick={random}\\n                    >\\n                        \\u6CA1\\u6709\\u60F3\\u5230\\u5408\\u9002\\u7684\\u5BC6\\u7801\\uFF1F\\u70B9\\u51FB\\u968F\\u673A\\u751F\\u6210\\u4E00\\u4E2A\\n                    </div>\\n                }\\n            ></Form.Input>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"extraTextPosition\"), \"\\uFF0C\\u4F60\\u53EF\\u4EE5\\u63A7\\u5236 extraText \\u7684\\u663E\\u793A\\u4F4D\\u7F6E\\u3002\\u53EF\\u9009\\u503C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"middle\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4F8B\\u5982\\u5982\\u5F53\\u4F60\\u5E0C\\u671B\\u5C06 extraText \\u63D0\\u793A\\u4FE1\\u606F\\u663E\\u793A\\u5728 Label \\u4E0E Field \\u63A7\\u4EF6\\u4E2D\\u95F4\\u65F6\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8BE5\\u5C5E\\u6027\\u53EF\\u5728 Form \\u4E0A\\u7EDF\\u4E00\\u914D\\u7F6E\\uFF0C\\u4EA6\\u53EF\\u5728\\u6BCF\\u4E2A Field \\u4E0A\\u5355\\u72EC\\u914D\\u7F6E\\uFF0C\\u540C\\u65F6\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5 Field \\u7684\\u914D\\u7F6E\\u4E3A\\u51C6\\u3002  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const options = [\\n        { label: '\\u98DE\\u4E66\\u901A\\u77E5', value: 'lark' },\\n        { label: '\\u90AE\\u4EF6\\u901A\\u77E5', value: 'email' },\\n        { label: '\\u9876\\u90E8\\u6A2A\\u5E45\\u901A\\u77E5', value: 'notification' }\\n    ];\\n    const notifyText = '\\u672A\\u52FE\\u9009\\u65F6\\uFF0C\\u9ED8\\u8BA4\\u4E3A\\u7EA2\\u70B9\\u63D0\\u9192\\uFF0C\\u6D88\\u606F\\u9ED8\\u8BA4\\u8FDB\\u5165\\u6536\\u4EF6\\u4EBA\\u6D88\\u606F\\u5217\\u8868\\u3002\\u5BF9\\u4E8E\\u91CD\\u8981\\u901A\\u77E5\\uFF0C\\u53EF\\u540C\\u65F6\\u52FE\\u9009\\u76F8\\u5E94\\u7684\\u901A\\u77E5\\u65B9\\u5F0F\\u3002';\\n    const forceText = '\\u5BF9\\u4E8E\\u5BF9\\u8BDD\\u6846\\u901A\\u77E5\\uFF0C\\u53EF\\u6307\\u5B9A\\u8BE5\\u6D88\\u606F\\u5FC5\\u987B\\u5728\\u6307\\u5B9A\\u65F6\\u957F\\u540E\\u624D\\u53EF\\u7F6E\\u4E3A\\u5DF2\\u8BFB\\u3002';\\n    return (\\n        <Form extraTextPosition='middle'>\\n            <Form.CheckboxGroup\\n                direction='horizontal'\\n                field='notify'\\n                label='\\u901A\\u77E5\\u65B9\\u5F0F'\\n                extraText={notifyText}\\n                options={options}\\n            />\\n            <Form.InputNumber field='force' label='\\u5F3A\\u5236\\u8BFB\\u53D6(\\u53EF\\u9009)' placeholder='\\u79D2' extraText={forceText} extraTextPosition='bottom'/>\\n        </Form>\\n    );\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 InputGroup \\u7EC4\\u5408\\u591A\\u4E2A Field\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u4F60\\u9700\\u8981\\u5C06\\u4E00\\u4E9B\\u8868\\u5355\\u63A7\\u4EF6\\u7EC4\\u5408\\u8D77\\u6765\\u4F7F\\u7528\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.InputGroup\"), \"\\u5C06\\u5176\\u5305\\u88F9\\u8D77\\u6765\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53\\u4F60\\u7ED9\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Select\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Input\"), \"\\u7B49\\u8868\\u5355\\u63A7\\u4EF6\\u52A0\\u4E0A field \\u5C5E\\u6027\\u65F6\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form\"), \"\\u4F1A\\u9ED8\\u8BA4\\u7ED9\\u6BCF\\u4E2A Field \\u63A7\\u4EF6\\u81EA\\u52A8\\u63D2\\u5165\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Label\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u800C\\u5728\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"InputGroup\"), \"\\u4E2D\\u4E00\\u822C\\u4EC5\\u9700\\u8981\\u4E00\\u4E2A\\u5C5E\\u4E8E\\u6574\\u4E2A Group \\u7684 Label\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728 InputGroup \\u4E2D\\u8BBE\\u7F6E label \\u5C5E\\u6027\\uFF0C\\u63D2\\u5165\\u4E00\\u4E2A\\u5C5E\\u4E8E Group \\u7684\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Label\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \"\\u53EF\\u914D\\u7F6E\\u5C5E\\u6027\\u8BE6\\u89C1\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Form.Label\"\n  }, \"Label\"), \"  \"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form onSubmit={(values) => console.log(values)} labelPosition='top' style={{ width: 400 }}>\\n        <Form.InputGroup label={{ text: (<span>\\u624B\\u673A\\u53F7\\u7801</span>), required: true }} labelPosition='top'>\\n            <Form.Select style={{ width: 150 }} field='phonePrefix' initValue='+86' rules={[{ required: true }]} showClear>\\n                <Form.Select.Option value='+1'>\\u7F8E\\u56FD+1</Form.Select.Option>\\n                <Form.Select.Option value='+852'>\\u9999\\u6E2F+852</Form.Select.Option>\\n                <Form.Select.Option value='+86'>\\u4E2D\\u56FD+86</Form.Select.Option>\\n                <Form.Select.Option value='+81'>\\u65E5\\u672C+81</Form.Select.Option>\\n            </Form.Select>\\n            <Form.Input initValue='18912345678' style={{ width: 250 }} field='phoneNumber' rules={[{ required: true }]} showClear />\\n        </Form.InputGroup>\\n        <Form.Input field='\\u59D3\\u540D' trigger='blur' initValue='Semi'></Form.Input>\\n        <Button htmlType='submit'>\\u63D0\\u4EA4</Button>\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Modal \\u5F39\\u51FA\\u5C42\\u4E2D\\u7684\\u8868\\u5355\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u5C06 Form \\u653E\\u7F6E\\u4E8E Modal \\u4E2D\\uFF0C\\u4EE5\\u5F39\\u7A97\\u5F62\\u5F0F\\u627F\\u8F7D\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5728\\u63D0\\u4EA4\\u65F6\\uFF0C\\u901A\\u8FC7 formApi.validate()\\u5BF9 Field \\u8FDB\\u884C\\u96C6\\u4E2D\\u6821\\u9A8C\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Modal, Button, Row, Col } from '@douyinfe/semi-ui';\\n\\nclass ModalFormDemo extends React.Component {\\n    constructor(props) {\\n        super(props);\\n        this.state = {\\n            visible: false,\\n        };\\n        this.showDialog = this.showDialog.bind(this);\\n        this.handleOk = this.handleOk.bind(this);\\n        this.handleCancel = this.handleCancel.bind(this);\\n        this.getFormApi = this.getFormApi.bind(this);\\n    }\\n\\n    showDialog() {\\n        this.setState({ visible: true });\\n    }\\n\\n    handleOk() {\\n        this.formApi.validate()\\n            .then((values) => {\\n                console.log(values);\\n            })\\n            .catch((errors) => {\\n                console.log(errors);\\n            });\\n    }\\n\\n    handleCancel() {\\n        this.setState({ visible: false });\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n\\n    render() {\\n        const { visible } = this.state;\\n        let message = '\\u8BE5\\u9879\\u4E3A\\u5FC5\\u586B\\u9879';\\n        return (\\n            <>\\n                <Button onClick={this.showDialog}>\\u6253\\u5F00\\u5F39\\u7A97</Button>\\n                <Modal\\n                    title=\\\"\\u65B0\\u5EFA\\\"\\n                    visible={visible}\\n                    onOk={this.handleOk}\\n                    style={{ width: 600 }}\\n                    onCancel={this.handleCancel}\\n                >\\n                    <Form\\n                        getFormApi={this.getFormApi}\\n                    >\\n                        <Row>\\n                            <Col span={5}>\\n                                <Form.Select\\n                                    field='region'\\n                                    label=\\\"\\u56FD\\u5BB6/\\u5730\\u533A\\\"\\n                                    placeholder='\\u8BF7\\u9009\\u62E9'\\n                                    style={{ width: '100%' }}\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                >\\n                                    <Form.Select.Option value=\\\"China\\\">\\u4E2D\\u56FD</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"US\\\">\\u7F8E\\u56FD</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"Europe\\\">\\u6B27\\u6D32</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"Japan\\\">\\u65E5\\u672C</Form.Select.Option>\\n                                </Form.Select>\\n                            </Col>\\n                            <Col span={15} offset={2}>\\n                                <Form.Input\\n                                    field='owner'\\n                                    label=\\\"\\u4E1A\\u52A1\\u6267\\u884C\\u4EBA\\\"\\n                                    trigger='blur'\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                />\\n                            </Col>\\n                        </Row>\\n                        <Row>\\n                            <Col span={5}>\\n                                <Form.Select\\n                                    field='area'\\n                                    label=\\\"\\u6295\\u653E\\u533A\\u57DF\\\"\\n                                    placeholder='\\u8BF7\\u9009\\u62E9'\\n                                    style={{ width: '100%' }}\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                >\\n                                    <Form.Select.Option value=\\\"China\\\">\\u4E2D\\u56FD</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"US\\\">\\u7F8E\\u56FD</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"Europe\\\">\\u6B27\\u6D32</Form.Select.Option>\\n                                    <Form.Select.Option value=\\\"Japan\\\">\\u65E5\\u672C</Form.Select.Option>\\n                                </Form.Select>\\n                            </Col>\\n                            <Col span={15} offset={2}>\\n                                <Form.Input\\n                                    field='department'\\n                                    label=\\\"\\u4E1A\\u52A1\\u6267\\u884C\\u90E8\\u95E8\\\"\\n                                    trigger='blur'\\n                                    rules={[\\n                                        { required: true, message },\\n                                    ]}\\n                                />\\n                            </Col>\\n                        </Row>\\n                    </Form>\\n                </Modal>\\n            </>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u7F6E\\u521D\\u59CB\\u503C\\u4E0E\\u6821\\u9A8C\\u89C4\\u5219\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"rules\"), \"\\u4E3A\\u6BCF\\u4E2A Field \\u8868\\u5355\\u63A7\\u4EF6\\u914D\\u7F6E\\u6821\\u9A8C\\u89C4\\u5219\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"Form \\u5185\\u90E8\\u7684\\u6821\\u9A8C\\u5E93\\u57FA\\u4E8E async-validator\\uFF0C\\u66F4\\u591A\\u914D\\u7F6E\\u89C4\\u5219\\u53EF\\u67E5\\u9605\\u5176\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/yiminghe/async-validator\"\n  }, \"\\u5B98\\u65B9\\u6587\\u6863\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 form \\u7684\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"initValues\"), \"\\u4E3A\\u6574\\u4E2A\\u8868\\u5355\\u7EDF\\u4E00\\u8BBE\\u7F6E\\u521D\\u59CB\\u503C\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5728\\u6BCF\\u4E2A field \\u4E2D\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"initValue\"), \"\\u8BBE\\u7F6E\\u521D\\u59CB\\u503C\\uFF08\\u540E\\u8005\\u4F18\\u5148\\u7EA7\\u66F4\\u9AD8\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 trigger \\u4E3A\\u6BCF\\u4E2A Field \\u914D\\u7F6E\\u4E0D\\u540C\\u7684\\u6821\\u9A8C\\u89E6\\u53D1\\u65F6\\u673A\\uFF0C\\u9ED8\\u8BA4\\u4E3A change\\uFF08\\u5373onChange\\u89E6\\u53D1\\u65F6\\uFF0C\\u81EA\\u52A8\\u8FDB\\u884C\\u6821\\u9A8C\\uFF09\\u3002\\u8FD8\\u652F\\u6301 change\\u3001blur\\u3001mount\\u3001custom \\u6216\\u4EE5\\u4E0A\\u7684\\u7EC4\\u5408\\u3002v2.42 \\u540E\\u652F\\u6301\\u901A\\u8FC7 FormProps \\u7EDF\\u4E00\\u914D\\u7F6E, \\u82E5\\u90FD\\u914D\\u7F6E\\u65F6\\uFF0C\\u4EE5 FieldProps \\u4E3A\\u51C6  \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 stopValidateWithError \\u5F00\\u5173\\uFF0C\\u51B3\\u5B9A\\u4F7F\\u7528 rules \\u6821\\u9A8C\\u65F6\\uFF0C\\u5F53\\u78B0\\u5230\\u7B2C\\u4E00\\u4E2A\\u68C0\\u9A8C\\u4E0D\\u901A\\u8FC7\\u7684 rules \\u540E\\uFF0C\\u662F\\u5426\\u7EE7\\u7EED\\u89E6\\u53D1\\u540E\\u7EED rules \\u7684\\u6821\\u9A8C\\u3002v2.42 \\u540E\\u652F\\u6301\\u901A\\u8FC7 FormProps \\u7EDF\\u4E00\\u914D\\u7F6E\\uFF0C\\u82E5\\u90FD\\u914D\\u7F6E\\u65F6\\uFF0C\\u4EE5 FieldProps \\u4E3A\\u51C6  \")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    \\n    const initValues = {\\n        name: 'semi',\\n        shortcut: 'se'\\n    };\\n    \\n    const style = { width: '100%' };\\n    \\n    const { Select, Input } = Form;\\n\\n    return (\\n        <Form initValues={initValues}>\\n            <Input\\n                field=\\\"name\\\"\\n                style={style}\\n                trigger='blur'\\n                rules={[\\n                    { required: true, message: 'required error' },\\n                    { type: 'string', message: 'type error' },\\n                    { validator: (rule, value) => value === 'semi', message: 'should be semi' },\\n                    { validator: (rule, value) => Boolean(value && value.startsWith('se')), message: 'should startsWith se' }\\n                ]}\\n            />\\n            <Input\\n                field=\\\"shortcut\\\"\\n                style={style}\\n                stopValidateWithError\\n                rules={[\\n                    { required: true, message: 'required error' },\\n                    { type: 'string', message: 'type error' },\\n                    { validator: (rule, value) => value === 'semi', message: 'should be semi' },\\n                    { validator: (rule, value) => Boolean(value && value.startsWith('se')), message: 'should startsWith se' }\\n                ]}\\n            />\\n            <Button htmlType='submit'>\\u63D0\\u4EA4</Button>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6821\\u9A8C(Form \\u7EA7\\u522B)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u7ED9\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form\"), \"\\u6574\\u4F53\\u8BBE\\u7F6E\\u81EA\\u5B9A\\u4E49\\u6821\\u9A8C\\u51FD\\u6570 validateFields\\u3002submit \\u6216\\u8C03\\u7528formApi.validate()\\u65F6\\u4F1A\\u8FDB\\u884C\\u8C03\\u7528\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"\\u5F53\\u914D\\u7F6E\\u4E86 Form\\u7EA7\\u522B\\u6821\\u9A8C\\u5668 validateFields \\u540E\\uFF0CField \\u7EA7\\u522B\\u7684\\u6821\\u9A8C\\u5668\\uFF08fieldProps.validate\\u3001fieldProps.rules \\u5C06\\u4E0D\\u518D\\u751F\\u6548\\uFF09\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u540C\\u6B65\\u6821\\u9A8C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6821\\u9A8C\\u901A\\u8FC7\\u65F6\\uFF0C\\u4F60\\u5E94\\u8BE5\\u8FD4\\u56DE\\u4E00\\u4E2A\\u7A7A\\u5B57\\u7B26\\u4E32\\uFF1B\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6821\\u9A8C\\u5931\\u8D25\\u65F6\\uFF0C\\u4F60\\u5E94\\u8BE5\\u8FD4\\u56DE\\u9519\\u8BEF\\u4FE1\\u606F(Object\\uFF0Ckey \\u4E3A fieldName\\uFF0Cvalue \\u4E3A\\u5BF9\\u5E94\\u7684\\u9519\\u8BEF\\u4FE1\\u606F\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FormLevelValidateSync extends React.Component {\\n    constructor() {\\n        super();\\n        this.syncValidate = this.syncValidate.bind(this);\\n    }\\n\\n    syncValidate(values) {\\n        const errors = {};\\n        if (values.name !== 'mike') {\\n            errors.name = 'you must name mike';\\n        }\\n        if (values.sex !== 'female') {\\n            errors.sex = 'must be woman';\\n        }\\n        errors.familyName = [\\n            { before: 'before errror balabala ', after: 'after error balabala' },\\n            'familyName[1] error balabala'\\n        ];\\n        return errors;\\n    }\\n\\n    render() {\\n        return (\\n            <Form validateFields={this.syncValidate} layout='horizontal'>\\n                <Form.Input field='name' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[0].before' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[0].after' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[1]' trigger='blur'></Form.Input>\\n                <div style={{ display: 'flex', alignItems: 'flex-end' }}>\\n                    <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\n                        Submit\\n                    </Button>\\n                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                </div>\\n            </Form >\\n        );\\n    }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5F02\\u6B65\\u6821\\u9A8C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F02\\u6B65\\u6821\\u9A8C\\u65F6\\uFF0C\\u4F60\\u5E94\\u5F53\\u8FD4\\u56DE\\u4E00\\u4E2A promise\\uFF0C\\u5728 promise.then()\\u4E2D \\u4F60\\u9700\\u8981 return \\u5BF9\\u5E94\\u7684\\u9519\\u8BEF\\u4FE1\\u606F\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FormLevelValidateAsync extends React.Component {\\n    constructor() {\\n        super();\\n        this.asyncValidate = this.asyncValidate.bind(this);\\n    }\\n\\n    asyncValidate(values) {\\n        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\\n        return sleep(2000).then(() => {\\n            let errors = {};\\n            if (values.name !== 'mike') {\\n                errors.name = 'you must name mike';\\n            }\\n            if (values.sex !== 'female') {\\n                errors.sex = 'sex not valid';\\n            }\\n            return errors;\\n        });\\n    }\\n\\n    render() {\\n        return (\\n            <Form validateFields={this.asyncValidate} layout='horizontal'>\\n                <Form.Input field='name' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[0].before' trigger='blur'></Form.Input>\\n                <Form.Input field='familyName[1]' trigger='blur'></Form.Input>\\n                <Form.Input field='sex' trigger='blur'></Form.Input>\\n                <div style={{ display: 'flex', alignItems: 'flex-end' }}>\\n                    <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\n                        Submit\\n                    </Button>\\n                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                </div>\\n            </Form >\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6821\\u9A8C(Field \\u7EA7\\u522B)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u6307\\u5B9A\\u5355\\u4E2A\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u81EA\\u5B9A\\u4E49\\u6821\\u9A8C\\u51FD\\u6570\\uFF0C\\u652F\\u6301\\u540C\\u6B65\\u3001\\u5F02\\u6B65\\u6821\\u9A8C\\uFF08\\u901A\\u8FC7\\u8FD4\\u56DE promise\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FieldLevelValidateDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.validateName = this.validateName.bind(this);\\n        this.asyncValidate = this.asyncValidate.bind(this);\\n    }\\n\\n    validateName(val) {\\n        if (!val) {\\n            return '\\u3010sync\\u3011can\\\\'t be empty';\\n        } else if (val.length <= 5) {\\n            return '\\u3010sync\\u3011must more than 5';\\n        }\\n        return '';\\n    }\\n\\n    asyncValidate(val, values) {\\n        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\\n        return sleep(2000).then(() => {\\n            if (!val) {\\n                return '\\u3010async\\u3011can\\\\'t be empty';\\n            } else if (val.length <= 5) {\\n                return '\\u3010async\\u3011must more than 5';\\n            } else {\\n                return '';\\n            }\\n        });\\n    }\\n\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' label='\\u3010name\\u3011asyncValidate after 2s' validate={this.asyncValidate} trigger='blur'></Form.Input>\\n                <Form.Input field='familyName' label='\\u3010familyName\\u3011syncValidate' validate={this.validateName} trigger='blur'></Form.Input>\\n                <Button htmlType=\\\"reset\\\">reset</Button>\\n            </Form >\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u624B\\u52A8\\u89E6\\u53D1\\u6307\\u5B9A Field \\u6821\\u9A8C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u4F60\\u5E0C\\u671B\\u624B\\u52A8\\u89E6\\u53D1\\u67D0\\u4E9B\\u7279\\u5B9A Field \\u7684\\u6821\\u9A8C\\u64CD\\u4F5C\\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 formApi.validate \\u5B8C\\u6210\\u3002\\u4E0D\\u4F20\\u5165\\u53C2\\u6570\\u65F6\\uFF0C\\u9ED8\\u8BA4\\u5BF9\\u5168\\u90E8 Field \\u8FDB\\u884C\\u6821\\u9A8C\\uFF0C\\u4F20\\u5165\\u53C2\\u6570\\u65F6\\uFF0C\\u4EE5\\u53C2\\u6570\\u6307\\u5B9A\\u4E3A\\u51C6\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9759\\u9ED8\\u6821\\u9A8C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u4F60\\u9700\\u8981\\u83B7\\u53D6\\u6821\\u9A8C\\u7ED3\\u679C\\u4F46\\u4E0D\\u60F3\\u89E6\\u53D1 UI \\u66F4\\u65B0\\u65F6\\uFF08\\u5982\\u4E0D\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A\\u3001\\u4E0D\\u8BBE\\u7F6E touched \\u72B6\\u6001\\uFF09\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.validate({ silent: true })\"), \" \\u5B9E\\u73B0\\u3002\\u8FD9\\u5728\\u6839\\u636E\\u6821\\u9A8C\\u7ED3\\u679C\\u51B3\\u5B9A\\u662F\\u5426\\u53D1\\u8D77\\u540E\\u7AEF\\u8BF7\\u6C42\\u7B49\\u573A\\u666F\\u4E2D\\u975E\\u5E38\\u6709\\u7528\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Button, Toast } from '@douyinfe/semi-ui';\\n\\nclass SilentValidationDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.handleSilentValidate = this.handleSilentValidate.bind(this);\\n        this.handleNormalValidate = this.handleNormalValidate.bind(this);\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n\\n    handleSilentValidate() {\\n        this.formApi.validate({ silent: true })\\n            .then(values => {\\n                Toast.success('\\u8868\\u5355\\u6821\\u9A8C\\u901A\\u8FC7\\uFF0C\\u51C6\\u5907\\u53D1\\u8D77\\u8BF7\\u6C42');\\n                console.log('\\u53D1\\u8D77\\u540E\\u7AEF\\u8BF7\\u6C42:', values);\\n            })\\n            .catch(errors => {\\n                Toast.error('\\u8868\\u5355\\u6821\\u9A8C\\u672A\\u901A\\u8FC7\\uFF0C\\u4F46\\u4E0D\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A');\\n                console.log('\\u6821\\u9A8C\\u9519\\u8BEF:', errors);\\n            });\\n    }\\n\\n    handleNormalValidate() {\\n        this.formApi.validate()\\n            .then(values => {\\n                Toast.success('\\u8868\\u5355\\u6821\\u9A8C\\u901A\\u8FC7');\\n            })\\n            .catch(errors => {\\n                Toast.error('\\u8868\\u5355\\u6821\\u9A8C\\u672A\\u901A\\u8FC7\\uFF0C\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A');\\n            });\\n    }\\n\\n    render() {\\n        return (\\n            <Form getFormApi={this.getFormApi} layout='horizontal'>\\n                <Form.Input\\n                    field=\\\"username\\\"\\n                    label=\\\"\\u7528\\u6237\\u540D\\\"\\n                    rules={[{ required: true, message: '\\u7528\\u6237\\u540D\\u4E0D\\u80FD\\u4E3A\\u7A7A' }, { min: 3, message: '\\u7528\\u6237\\u540D\\u81F3\\u5C11 3 \\u4E2A\\u5B57\\u7B26' }]}\\n                />\\n                <Form.Input\\n                    field=\\\"email\\\"\\n                    label=\\\"\\u90AE\\u7BB1\\\"\\n                    rules={[{ required: true, message: '\\u90AE\\u7BB1\\u4E0D\\u80FD\\u4E3A\\u7A7A' }, { type: 'email', message: '\\u90AE\\u7BB1\\u683C\\u5F0F\\u4E0D\\u6B63\\u786E' }]}\\n                />\\n                <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>\\n                    <Button onClick={this.handleSilentValidate} type=\\\"primary\\\">\\u9759\\u9ED8\\u6821\\u9A8C\\uFF08\\u4E0D\\u663E\\u793A\\u9519\\u8BEF\\uFF09</Button>\\n                    <Button onClick={this.handleNormalValidate}>\\u666E\\u901A\\u6821\\u9A8C\\uFF08\\u663E\\u793A\\u9519\\u8BEF\\uFF09</Button>\\n                </div>\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Button, Space } from '@douyinfe/semi-ui';\\nclass PartValidAndResetDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.validate = this.validate.bind(this);\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.validatePartial = this.validatePartial.bind(this);\\n        this.resetPartial = this.resetPartial.bind(this);\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n    }\\n\\n    validate(val) {\\n        if (!val) {\\n            return 'can\\\\'t be empty';\\n        } else if (val.length <= 5) {\\n            return (<span>\\u6211\\u662F\\u4F20\\u5165\\u7684reactNode</span>);\\n        }\\n        return;\\n    }\\n\\n    validatePartial(type) {\\n        let scope = this.formApi.getValue('validateScope');\\n        !scope ? scope = [] : null;\\n        type === 'all' ? scope = ['a', 'b', 'c', 'd', 'b.name'] : null;\\n        this.formApi.validate(scope)\\n            .then(values => {\\n                console.log(values);\\n                Toast.success('pass');\\n            }).catch(error => {\\n                Toast.error('error');\\n                console.log(error);\\n            });\\n    }\\n\\n    resetPartial() {\\n        let scope = this.formApi.getValue('resetScope');\\n        this.formApi.reset(scope);\\n    }\\n\\n    render() {\\n        let options = ['a', 'b', 'c', 'd', 'b.name'].map(item => ({ label: item, value: item }));\\n        return (\\n            <Form getFormApi={this.getFormApi} autoScrollToError layout='horizontal'>\\n                {\\n                    ({ formState, values, formApi }) => (\\n                        <>\\n                            <div>\\n                                <Form.Input field=\\\"a[1]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"a[0]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"b.name[0]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"b.name[1]\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"b.type\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"c\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                                <Form.Input field=\\\"d\\\" validate={this.validate} trigger=\\\"blur\\\" />\\n                            </div>\\n                            <div>\\n                                <Form.CheckboxGroup options={options} field=\\\"validateScope\\\" label=\\\"\\u5F53\\u524D\\u5E0C\\u671B\\u6821\\u9A8C\\u7684Field\\\" initValue={['a', 'b']} direction=\\\"horizontal\\\" />\\n                                <Form.CheckboxGroup options={options} field=\\\"resetScope\\\" label=\\\"\\u5F53\\u524D\\u9700\\u8981Reset\\u7684Field\\\" direction=\\\"horizontal\\\" />\\n                                <Space>\\n                                    <Button htmlType=\\\"reset\\\">reset</Button>\\n                                    <Button onClick={() => this.validatePartial('all')}>all validate</Button>\\n                                    <Button onClick={() => this.validatePartial()}>partial validate {JSON.stringify(values.validateScope)}</Button>\\n                                    <Button onClick={this.resetPartial}>partial reset</Button>\\n                                </Space>\\n                            </div>\\n                        </>\\n                    )\\n                }\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8868\\u5355\\u8054\\u52A8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u76D1\\u542C Field \\u7684 onChange \\u4E8B\\u4EF6\\uFF0C\\u7136\\u540E\\u4F7F\\u7528 formApi \\u8FDB\\u884C\\u76F8\\u5173\\u4FEE\\u6539\\uFF0C\\u6765\\u4F7F Field \\u4E4B\\u95F4\\u8FBE\\u5230\\u8054\\u52A8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Form, Button, Row } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const formRef = useRef();\\n\\n    const handleSelectChange = (value) => {\\n        let text = value === 'male' ? 'Hi male' : 'Hi female!';\\n        formRef.current.formApi.setValue('Note', text);\\n    };\\n\\n    return (\\n        <Form ref={formRef} onValueChange={values => console.log(values) } style={{ width: 250 }}>\\n            <span>Note will change after Sex select</span>\\n            <Form.Input field=\\\"Note\\\" style={{ width: 250 }}/>\\n            <Form.Select field=\\\"Sex\\\" onChange={handleSelectChange} style={{ width: 250 }}>\\n                <Form.Select.Option value=\\\"female\\\">female</Form.Select.Option>\\n                <Form.Select.Option value=\\\"male\\\">male</Form.Select.Option>\\n            </Form.Select>\\n            <Row>\\n                <Button type=\\\"primary\\\" htmlType=\\\"submit\\\" className=\\\"btn-margin-right\\\">\\n                    Submit\\n                </Button>\\n                <Button htmlType=\\\"reset\\\">reset</Button>\\n            </Row>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A8\\u6001\\u8868\\u5355\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u52A8\\u6001\\u5220\\u51CF\\u8868\\u5355\\u9879\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Form style={{ width: 450 }}>\\n        {({ formState }) => (\\n            <React.Fragment>\\n                <Form.Input field=\\\"name\\\" label='\\u7528\\u6237\\u540D\\u79F0:' />\\n                <Form.RadioGroup field=\\\"isAnchor\\\" label='\\u662F\\u5426\\u5DF2\\u6CE8\\u518C\\u4E3B\\u64AD'>\\n                    <Form.Radio value=\\\"yes\\\">yes</Form.Radio>\\n                    <Form.Radio value=\\\"no\\\">no</Form.Radio>\\n                </Form.RadioGroup>\\n                {formState.values.isAnchor === 'yes' ? (\\n                    <Form.Input field=\\\"liveRoom\\\" label='\\u76F4\\u64AD\\u95F4\\u540D\\u79F0' />\\n                ) : null}\\n                <Button htmlType=\\\"submit\\\">\\u63D0\\u4EA4</Button>\\n            </React.Fragment>\\n        )}\\n    </Form>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 ArrayField\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9488\\u5BF9\\u52A8\\u6001\\u589E\\u5220\\u7684\\u6570\\u7EC4\\u7C7B\\u8868\\u5355\\u9879\\uFF0C\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86 ArrayField \\u4F5C\\u7528\\u57DF\\u6765\\u7B80\\u5316 add/remove \\u7684\\u64CD\\u4F5C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"ArrayField \\u81EA\\u5E26\\u4E86 add\\u3001remove\\u3001addWithInitValue \\u7B49 api \\u7528\\u6765\\u6267\\u884C\\u65B0\\u589E\\u884C\\uFF0C\\u5220\\u9664\\u884C\\uFF0C\\u65B0\\u589E\\u5E26\\u6709\\u521D\\u59CB\\u503C\\u7684\\u884C\\u7B49\\u64CD\\u4F5C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"ArrayField \\u8BE6\\u7EC6\\u7684 API\\u8BF7\\u67E5\\u9605\\u4E0B\\u65B9 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#arrayfield-props\"\n  }, \"ArrayField Props\"), \"\\n\\u6CE8\\u610F\\uFF1AArrayField \\u7684 initValue \\u7C7B\\u578B\\u5FC5\\u987B\\u662F\\u6570\\u7EC4\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { ArrayField, TextArea, Form, Button, useFormState } from '@douyinfe/semi-ui';\\nimport { IconPlusCircle, IconMinusCircle } from '@douyinfe/semi-icons';\\n\\nclass ArrayFieldDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.state = {\\n            data: [\\n                { name: 'Semi D2C', role: 'Engineer' },\\n                { name: 'Semi C2D', role: 'Designer' },\\n            ]\\n        };\\n    }\\n\\n    render() {\\n        let { data } = this.state;\\n        const ComponentUsingFormState = () => {\\n            const formState = useFormState();\\n            return (\\n                <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState)} />\\n            );\\n        };\\n        return (\\n            <Form style={{ width: 800 }} labelPosition='left' labelWidth='100px' allowEmpty>\\n                <ArrayField field='rules' initValue={data}>\\n                    {({ add, arrayFields, addWithInitValue }) => (\\n                        <React.Fragment>\\n                            <Button onClick={add} icon={<IconPlusCircle />} theme='light'>Add new line</Button>\\n                            <Button icon={<IconPlusCircle />} onClick={() => {addWithInitValue({ name: 'Semi DSM', type: 'Designer' });}} style={{ marginLeft: 8 }}>Add new line with init value</Button>\\n                            {\\n                                arrayFields.map(({ field, key, remove }, i) => (\\n                                    <div key={key} style={{ width: 1000, display: 'flex' }}>\\n                                        <Form.Input\\n                                            field={`${field}[name]`}\\n                                            label={`${field}.name`}\\n                                            style={{ width: 200, marginRight: 16 }}\\n                                        >\\n                                        </Form.Input>\\n                                        <Form.Select\\n                                            field={`${field}[role]`}\\n                                            label={`${field}.role`}\\n                                            style={{ width: 120 }}\\n                                            optionList={[\\n                                                { label: 'Engineer', value: 'Engineer' },\\n                                                { label: 'Designer', value: 'Designer' },\\n                                            ]}\\n                                        >\\n                                        </Form.Select>\\n                                        <Button\\n                                            type='danger'\\n                                            theme='borderless'\\n                                            icon={<IconMinusCircle />}\\n                                            onClick={remove}\\n                                            style={{ margin: 12 }}\\n                                        />\\n                                    </div>\\n                                ))\\n                            }\\n                        </React.Fragment>\\n                    )}\\n                </ArrayField>\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5D4C\\u5957 ArrayField\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"ArrayField \\u652F\\u6301\\u591A\\u7EA7\\u5D4C\\u5957\\uFF0C\\u5982\\u4E0B\\u662F\\u4E00\\u4E2A\\u4E24\\u7EA7\\u5D4C\\u5957\\u7684\\u4F8B\\u5B50\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import { Form, ArrayField, Button, Card, Typography, } from \\\"@douyinfe/semi-ui\\\";\\nimport { IconPlusCircle, IconMinusCircle } from \\\"@douyinfe/semi-icons\\\";\\nimport React from \\\"react\\\";\\n\\nconst selectOption = [\\n    { label: '\\u53D1\\u4EF6\\u4EBA\\u5730\\u5740', value: 'address' },\\n    { label: '\\u90AE\\u4EF6\\u4E3B\\u9898', value: 'title' },\\n    { label: '\\u53D1\\u9001\\u65F6\\u95F4', value: 'sendTime' },\\n    { label: '\\u63A5\\u6536\\u65F6\\u95F4', value: 'receiveTime' },\\n    { label: '\\u6B63\\u6587', value: 'main' },\\n    { label: '\\u9644\\u4EF6\\u540D\\u79F0', value: 'attachmentName' },\\n];\\n\\nconst initValue = {\\n    group: [\\n        {\\n            name: \\\"\\u6536\\u4FE1\\u89C4\\u52191\\\",\\n            rules: [\\n                { ruleType: \\\"address\\\", type: \\\"include\\\", text: \\\"bytedance.com\\\" },\\n                { ruleType: \\\"title\\\", type: \\\"exclude\\\", text: \\\"\\u66F4\\u65B0\\u65E5\\u5FD7\\\" },\\n            ],\\n        },\\n        {\\n            name: \\\"\\u6536\\u4FE1\\u89C4\\u52192\\\",\\n            rules: [\\n                { ruleType: \\\"sendTime\\\", type: \\\"include\\\", text: \\\"2019\\\" }\\n            ],\\n        },\\n    ] \\n};\\n\\nconst NestedField = (props) => {\\n    const rowStyle = {\\n        marginTop: 12,\\n        marginLeft: 12,\\n    };\\n    return (\\n        <ArrayField field={`${props.field}.rules`}>\\n            {({ add, arrayFields, addWithInitValue }) => (\\n                <React.Fragment>\\n                    {arrayFields.map(({ field, key, remove }, i) => (\\n                        <div style={{ display: \\\"flex\\\" }} key={key}>\\n                            <Form.Select\\n                                field={`${field}[ruleType]`}\\n                                label={`${field}.ruleType`}\\n                                noLabel\\n                                optionList={selectOption}\\n                                style={{ width: 120, marginRight: 12 }}\\n                            ></Form.Select>\\n                            <Form.Select\\n                                field={`${field}[type]`}\\n                                label={`${field}.type`}\\n                                noLabel\\n                                style={{ width: 100, marginRight: 12 }}\\n                                optionList={[\\n                                    { label: \\\"\\u5305\\u542B\\\", value: \\\"include\\\" },\\n                                    { label: \\\"\\u4E0D\\u5305\\u542B\\\", value: \\\"exclude\\\" },\\n                                ]}\\n                            ></Form.Select>\\n                            <Form.Input \\n                                field={`${field}[text]`}\\n                                label={`${field}.text`}\\n                                noLabel\\n                                style={{ width: 200 }}\\n                            ></Form.Input>\\n                            <Button\\n                                type=\\\"danger\\\"\\n                                theme=\\\"borderless\\\"\\n                                style={rowStyle}\\n                                icon={<IconMinusCircle />}\\n                                onClick={remove}\\n                            />\\n                            <Button\\n                                icon={<IconPlusCircle />}\\n                                style={rowStyle}\\n                                disabled={i !== arrayFields.length - 1}\\n                                onClick={() => {\\n                                    addWithInitValue({\\n                                        ruleType: `\\u6761\\u4EF6${arrayFields.length + 1}`,\\n                                        type: \\\"include\\\",\\n                                    });\\n                                }}\\n                            />\\n                        </div>\\n                    ))}\\n                </React.Fragment>\\n            )}\\n        </ArrayField>\\n    );\\n};\\n\\nconst NestArrayFieldDemo = () => {\\n    return (\\n        <Form\\n            onValueChange={(values) => console.log(values)}\\n            initValues={initValue}\\n            labelPosition=\\\"left\\\"\\n            style={{ textAlign: \\\"left\\\" }}\\n            allowEmpty\\n        >\\n            <ArrayField field=\\\"group\\\" >\\n                {({ add, arrayFields, addWithInitValue }) => (\\n                    <React.Fragment>\\n                        <Button\\n                            icon={<IconPlusCircle />}\\n                            theme=\\\"solid\\\"\\n                            onClick={() => {\\n                                addWithInitValue({\\n                                    name: \\\"\\u65B0\\u89C4\\u5219\\u540D\\u79F0\\\",\\n                                    rules: [\\n                                        { ruleType: \\\"main\\\", type: \\\"include\\\", text: \\\"\\\" },\\n                                        { ruleType: \\\"attachmentName\\\", type: \\\"include\\\", text: \\\"\\\" },\\n                                    ],\\n                                });\\n                            }}\\n                        >\\n                            \\u65B0\\u589E\\u6536\\u4FE1\\u89C4\\u5219 \\n                        </Button>\\n                        {arrayFields.map(({ field, key, remove }, i) => (\\n                            <div\\n                                key={key}\\n                                style={{ width: 1000, display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}\\n                            >\\n                                <Form.Input\\n                                    field={`${field}[name]`}\\n                                    labelPosition=\\\"top\\\"\\n                                    label={\\\"\\u89C4\\u5219\\u540D\\u79F0\\\"}\\n                                    style={{ width: \\\"600px\\\" }}\\n                                ></Form.Input>\\n                                <Button\\n                                    type=\\\"danger\\\"\\n                                    style={{ margin: \\\"36px 0 0 12px\\\" }}\\n                                    icon={<IconMinusCircle />}\\n                                    onClick={remove}\\n                                />\\n                                <Typography.Text strong style={{ flexBasis: \\\"100%\\\" }}>\\n                                    \\u5F53\\u90AE\\u4EF6\\u5230\\u8FBE\\uFF0C\\u6EE1\\u8DB3\\u4EE5\\u4E0B\\u6761\\u4EF6\\u65F6\\uFF1A\\n                                </Typography.Text>\\n                                <Card\\n                                    shadow=\\\"hover\\\"\\n                                    style={{\\n                                        width: 620,\\n                                        margin: \\\"12px 0 0 24px\\\",\\n                                    }}\\n                                >\\n                                    <NestedField field={field} />\\n                                </Card>\\n                            </div>\\n                        ))}\\n                    </React.Fragment>\\n                )}\\n            </ArrayField>\\n        </Form>\\n    );\\n};\\n\\nrender(NestArrayFieldDemo);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Hooks \\u7684\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86\\u56DB\\u4E2A Hooks\\uFF0C\\u4F7F\\u4F60\\u5728\\u4E0D\\u9700\\u8981\\u901A\\u8FC7 props \\u4F20\\u9012\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E5F\\u80FD\\u5728\\u653E\\u7F6E\\u4E8E Form \\u7ED3\\u6784\\u5185\\u90E8\\u7684 Functional Component \\u4E2D\\u4E5F\\u80FD\\u8F7B\\u6613\\u8BBF\\u95EE\\u5230 Form \\u5185\\u90E8\\u72B6\\u6001\\u6570\\u636E\\uFF0C\\u4EE5\\u53CA\\u8C03\\u7528 Form\\u3001Field \\u7684\\u76F8\\u5173 api\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { useFormApi, useFormState, useFieldApi, useFieldState } from '@douyinfe/semi-ui';\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFormApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"useFormApi \\u5141\\u8BB8\\u4F60\\u901A\\u8FC7 hook\\uFF0C\\u5728 Functional Component \\u5185\\u76F4\\u63A5\\u8BBF\\u95EE\\u7236\\u7EA7 Form \\u7EC4\\u4EF6\\u7684 formApi\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFormApi, Form, Button } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFormApi = () => {\\n    const formApi = useFormApi();\\n    const change = () => {\\n        formApi.setValue('name', Math.random());\\n    };\\n    return (\\n        <Button onClick={change}>ChangeName By\\u3010formApi\\u3011</Button>\\n    );\\n};\\n\\nclass UseFromApiDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <ComponentUsingFormApi />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFromApiDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFormState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"useFormState \\u5141\\u8BB8\\u4F60\\u901A\\u8FC7 hook\\uFF0C\\u5728 Functional Component \\u5185\\u76F4\\u63A5\\u8BBF\\u95EE\\u7236\\u7EA7 Form \\u7EC4\\u4EF6\\u7684 formState\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFormState, Form } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFormState = () => {\\n    const formState = useFormState();\\n    return (\\n        <pre>\\n            <code>{JSON.stringify(formState)}</code>\\n        </pre>\\n    );\\n};\\n\\nclass UseFromStateDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <h5>FormState read by \\u3010useFormState\\u3011\\uFF1A</h5>\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFromStateDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFieldApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"useFieldApi \\u5141\\u8BB8\\u4F60\\u901A\\u8FC7 hook\\uFF0C\\u5728 Functional Component \\u5185\\u76F4\\u63A5\\u8C03\\u7528\\u6307\\u5B9A Field \\u7684 api\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFieldApi, Form, Button } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFieldApi = () => {\\n    const nameFieldApi = useFieldApi('name');\\n    const change = () => {\\n        nameFieldApi.setValue(Math.random());\\n    };\\n    return (\\n        <Button onClick={change}>Click Me!!! changeNameBy\\u3010fieldApi\\u3011</Button>\\n    );\\n};\\n\\nclass UseFieldApiDemo extends React.PureComponent {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='mike'></Form.Input>\\n                <ComponentUsingFieldApi />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFieldApiDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"useFieldState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"useFieldState \\u5141\\u8BB8\\u4F60\\u901A\\u8FC7 hook\\uFF0C\\u5728 Functional Component \\u5185\\u76F4\\u63A5\\u8BBF\\u95EE\\u6307\\u5B9A Field \\u7684 State\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { useFieldState, Form } from '@douyinfe/semi-ui';\\n\\nconst ComponentUsingFieldState = props => {\\n    const fieldState = useFieldState(props.field);\\n    return (\\n        <div>\\n            <span>\\u3010{props.field}\\u3011FieldState read by \\u3010useFieldState\\u3011\\uFF1A</span>\\n            <code>{JSON.stringify(fieldState)}</code>\\n        </div>\\n    );\\n};\\nclass UseFieldStateDemo extends React.PureComponent {\\n    render() {\\n        return (\\n            <Form layout='horizontal'>\\n                <div style={{ width: 400 }}>\\n                    <Form.Input field='name' initValue='mike'></Form.Input>\\n                    <Form.Input field='country' initValue='china'></Form.Input>\\n                </div>\\n                <div style={{ width: 500, marginTop: 30 }}>\\n                    <ComponentUsingFieldState field='name' />\\n                    <ComponentUsingFieldState field='country' style={{ marginTop: 40 }} />\\n                </div>\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(UseFieldStateDemo);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"HOC \\u7684\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86\\u4E24\\u4E2A HOC: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withFormApi\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withFormState\"), \"\\uFF0C\\u53EF\\u4EE5\\u5728\\u5176\\u4ED6\\u7EC4\\u4EF6\\u5185\\u90E8\\u8BBF\\u95EE\\u5230 Form \\u7684 formApi \\u4EE5\\u53CA\\u5185\\u90E8\\u72B6\\u6001 formState\\n\\u63D0\\u4F9B\\u4E86 HOC\\uFF1A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"withField\"), \"\\uFF0C\\u7528\\u4E8E\\u5C06\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u5C01\\u88C5\\u6210\\u7B26\\u5408 Semi Form \\u6570\\u636E\\u6D41\\u7684\\u8868\\u5355\\u63A7\\u4EF6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"import { withFormApi, withFormState, withField } from '@douyinfe/semi-ui';\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"HOC-withFormApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 withFormApi HOC \\u6765\\u5C01\\u88C5\\u7EC4\\u4EF6\\uFF0C\\u4F7F\\u5F97\\u8BE5\\u7EC4\\u4EF6\\u5185\\u90E8\\u53EF\\u4EE5\\u76F4\\u63A5\\u8C03\\u7528\\u7236\\u7EA7 Form \\u7EC4\\u4EF6\\u7684 formApi\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6CE8\\u610F\\u5C01\\u88C5\\u540E\\u7684\\u7EC4\\u4EF6\\u5FC5\\u987B\\u653E\\u7F6E\\u4E8E Form \\u7ED3\\u6784\\u5185\\u90E8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withFormApi, Form, Button } from '@douyinfe/semi-ui';\\n\\nconst SomeComponetInsideForm = props => (\\n    <Button onClick={() => {\\n        props.formApi.setValue('name', Math.random());\\n    }}>Click Me!!! ChangeName By\\u3010formApi\\u3011</Button>\\n);\\nconst ComponentWithFormApi = withFormApi(SomeComponetInsideForm);\\n\\nclass WithFormApiDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='semi'></Form.Input>\\n                <Form.Input field='familyName' initValue='design'></Form.Input>\\n                <Button htmlType='submit' style={{ marginRight: 4 }}>submit</Button>\\n                <ComponentWithFormApi />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFormApiDemo);\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"HOC-withFormState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 withFormState HOC \\u6765\\u5C01\\u88C5\\u7EC4\\u4EF6\\uFF0C\\u4F7F\\u5F97\\u8BE5\\u7EC4\\u4EF6\\u5185\\u90E8\\u53EF\\u76F4\\u63A5\\u8BBF\\u95EE\\u5230\\u7236\\u7EA7 Form \\u7EC4\\u4EF6\\u7684 FormState\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6CE8\\u610F\\u5C01\\u88C5\\u540E\\u7684\\u7EC4\\u4EF6\\u5FC5\\u987B\\u653E\\u7F6E\\u4E8E Form \\u7ED3\\u6784\\u5185\\u90E8 (\\u56E0\\u5176\\u5F3A\\u4F9D\\u8D56 Context \\u673A\\u5236\\u8FDB\\u884C\\u6D88\\u8D39)\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withFormState, Form } from '@douyinfe/semi-ui';\\n\\nconst SomeComponentInsideForm = props => (\\n    <code>{JSON.stringify(props.formState)}</code>\\n);\\nconst ComponentWithFormState = withFormState(SomeComponentInsideForm);\\n\\nclass WithFormStateDemo extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <Form.Input field='name' initValue='semi'></Form.Input>\\n                <Form.Input field='familyName' initValue='design'></Form.Input>\\n                <ComponentWithFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFormStateDemo);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"withField \\u5C01\\u88C5\\u81EA\\u5B9A\\u4E49\\u8868\\u5355\\u63A7\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 withField\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5C06\\u5176\\u4ED6\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u6269\\u5C55\\u6210\\u4E3A\\u8868\\u5355\\u63A7\\u4EF6\\uFF0C\\u7531 Form \\u63A5\\u7BA1\\u5176\\u884C\\u4E3A\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u5FC5\\u987B\\u4E3A\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u53EA\\u6709\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u624D\\u80FD\\u88AB Form \\u63A5\\u7BA1\\uFF0C\\u6B63\\u786E\\u5730\\u8FDB\\u884C\\u503C\\u7684\\u66F4\\u65B0\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"withField \\u4E3B\\u8981\\u505A\\u4E86\\u4EE5\\u4E0B\\u4E8B\\u60C5\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8D1F\\u8D23\\u63A5\\u7BA1\\u7EC4\\u4EF6\\u7684 value\\uFF08\\u6216\\u8005 valueKey \\u6307\\u5B9A\\u7684\\u5176\\u4ED6\\u5C5E\\u6027\\uFF09\\u3001onChange\\uFF08\\u6216 onKeyChangeFnName \\u6307\\u5B9A\\u7684\\u5176\\u4ED6\\u56DE\\u8C03\\u51FD\\u6570\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8D1F\\u8D23\\u5728\\u8868\\u5355\\u63A7\\u4EF6\\u4E0A\\u65B9\\u63D2\\u5165 Field \\u7684\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<Form.Label>\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8D1F\\u8D23\\u5728\\u8868\\u5355\\u63A7\\u4EF6\\u4E0B\\u65B9\\u63D2\\u5165 Field \\u7684\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<ErrorMessage>\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8D1F\\u8D23\\u5728\\u8868\\u5355\\u63A7\\u4EF6\\u4E0B\\u65B9\\u63D2\\u5165 Field \\u7684 extraText\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"withFieldOption \\u5177\\u4F53\\u914D\\u7F6E\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#withFieldOption\"\n  }, \"withField Option\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u7684\\u81EA\\u5B9A\\u4E49\\u53D7\\u63A7\\u7EC4\\u4EF6\\u9700\\u8981\\u505A\\u4EE5\\u4E0B\\u4E8B\\u60C5\\uFF1A  \"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u503C\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\uFF0C\\u8C03\\u7528props.onChange (\\u6216 onKeyChangeFnName \\u6307\\u5B9A\\u7684\\u5176\\u4ED6\\u56DE\\u8C03\\u51FD\\u6570) \\u5E76\\u4E14\\u5C06\\u6700\\u65B0\\u7684\\u503C\\u4F5C\\u4E3A\\u5165\\u53C2  \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u54CD\\u5E94props.value\\uFF08\\u6216\\u8005 valueKey \\u6307\\u5B9A\\u7684\\u5176\\u4ED6\\u5C5E\\u6027\\uFF09\\u7684\\u53D8\\u5316\\uFF0C\\u5E76\\u66F4\\u65B0\\u4F60\\u7684\\u7EC4\\u4EF6UI\\u6E32\\u67D3\\u7ED3\\u679C  \")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"withField(YourComponent, withFieldOption);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withField, Form } from '@douyinfe/semi-ui';\\n\\n// \\u8FD9\\u91CC\\u5C06html\\u539F\\u751F\\u7684input\\u5C01\\u88C5\\nconst htmlInput = (props) => {\\n    let value = props.value || '';\\n    let { validateStatus, ...rest } = props; // prevent props being transparently transmitted to DOM\\n    return <input {...rest} value={value} />; \\n};\\nconst CustomInput = withField(htmlInput, { valueKey: 'value', onKeyChangeFnName: 'onChange', valuePath: 'target.value' });\\n\\n// \\u89C2\\u5BDFformState\\uFF0C\\u770Binput\\u7684\\u6570\\u636E\\u6D41\\u662F\\u5426\\u5DF2\\u88ABform\\u63A5\\u7BA1\\nconst ComponentUsingFormState = () => {\\n    const formState = useFormState();\\n    return (\\n        <pre>\\n            <code>{JSON.stringify(formState)}</code>\\n        </pre>\\n    );\\n};\\n\\nclass WithFieldDemo1 extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <CustomInput field='name' />\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFieldDemo1);\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\",\n    \"noInline\": \"true\"\n  }, \"import React from 'react';\\nimport { withField, Input, Select, Form } from '@douyinfe/semi-ui';\\n\\nconst MyComponent = (props) => {\\n    const { onChange, value } = props;\\n    const { name, role } = value || {};\\n    const handleChange = (v, type) => {\\n        let newValue = { ...value, [type==='name' ? 'name' : 'role']: v };\\n        onChange(newValue);\\n    };\\n    return (\\n        <div className='customField'>\\n            <Input prefix='\\u540D\\u79F0' value={name} onChange={v => handleChange(v, 'name')} style={{ width: 180, marginRight: 12 }} />\\n            <Select\\n                prefix='\\u89D2\\u8272'\\n                value={role}\\n                onChange={v => handleChange(v, 'role')}\\n                style={{ width: 200 }}\\n                optionList={[{ value: 'rd', label: '\\u5F00\\u53D1' }, { value: 'UED', label: '\\u8BBE\\u8BA1\\u5E08' }]}\\n            />\\n        </div>\\n    );\\n};\\nconst CustomField = withField(MyComponent, { valueKey: 'value', onKeyChangeFnName: 'onChange' });\\n\\nconst ComponentUsingFormState = () => {\\n    const formState = useFormState();\\n    return (\\n        <pre>\\n            <code>{JSON.stringify(formState)}</code>\\n        </pre>\\n    );\\n};\\n\\nclass WithFieldDemo2 extends React.Component {\\n    render() {\\n        return (\\n            <Form>\\n                <CustomField field='baseInfo' label={{ text: '\\u57FA\\u672C\\u4FE1\\u606F', required: true }} />\\n                <ComponentUsingFormState />\\n            </Form>\\n        );\\n    }\\n}\\n\\nrender(WithFieldDemo2);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form Props\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoScrollToError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u82E5\\u4E3A true\\uFF0Csubmit \\u6216\\u8005\\u8C03\\u7528 formApi.validate()\\u6821\\u9A8C\\u5931\\u8D25\\u65F6\\uFF0C\\u5C06\\u4F1A\\u81EA\\u52A8\\u6EDA\\u52A8\\u81F3\\u51FA\\u9519\\u7684\\u5B57\\u6BB5\\u3002object \\u578B\\u914D\\u7F6E\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/stipsan/scroll-into-view-if-needed#options\"\n  }, \"options\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \" object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"allowEmpty\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4FDD\\u7559values\\u4E2D\\u4E3A\\u7A7A\\u503C\\u7684field\\u7684key\\uFF0Ctrue\\u65F6\\u4FDD\\u7559key\\uFF0Cfalse\\u65F6\\u79FB\\u9664key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form \\u6807\\u7B7E\\u7684 classname\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u4E8E\\u58F0\\u660E\\u8868\\u5355\\u63A7\\u4EF6\\uFF0C\\u4E0D\\u53EF\\u4E0E render\\u3001props.children \\u540C\\u65F6\\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u5E94\\u7528\\u5728\\u6BCF\\u4E2A Field \\u7684 disabled \\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraTextPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u5E94\\u7528\\u5728\\u6BCF\\u4E2A Field \\u4E0A\\u7684extraTextPosition\\u5C5E\\u6027\\uFF0C\\u63A7\\u5236extraText\\u7684\\u663E\\u793A\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \"\\uFF08\\u5782\\u76F4\\u65B9\\u5411\\u4EE5Label\\u3001extraText\\u3001Field\\u4E3B\\u4F53\\u7684\\u987A\\u5E8F\\u663E\\u793A\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" (\\u5782\\u76F4\\u65B9\\u5411\\u4EE5Label\\u3001Field\\u4E3B\\u4F53\\u3001extraText\\u7684\\u987A\\u5E8F\\u663E\\u793A)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFormApi\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form mounted \\u65F6\\u4F1A\\u56DE\\u8C03\\u8BE5\\u51FD\\u6570\\uFF0C\\u5C06 formAPI \\u4F5C\\u4E3A\\u53C2\\u6570\\u4F20\\u5165\\u3002formApi \\u53EF\\u7528\\u4E8E\\u4FEE\\u6539 form \\u5185\\u90E8\\u72B6\\u6001\\uFF08\\u503C\\u3001\\u6821\\u9A8C\\u72B6\\u6001\\u3001\\u9519\\u8BEF\\u4FE1\\u606F\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(formApi:object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5916\\u90E8\\u4F20\\u5165\\u7684 formApi \\u5B9E\\u4F8B\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Form.useForm()\"), \" \\u521B\\u5EFA\\u3002\\u7528\\u4E8E\\u5728 Form \\u5916\\u90E8\\u63A7\\u5236\\u8868\\u5355\\u72B6\\u6001\\u3002\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \">=2.94.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"initValues\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u4E8E\\u7EDF\\u4E00\\u8BBE\\u7F6E\\u8868\\u5355\\u521D\\u59CB\\u503C\\uFF08\\u4EC5\\u4F1A\\u5728\\u7EC4\\u4EF6\\u6302\\u8F7D\\u65F6\\u6D88\\u8D39\\u4E00\\u6B21\\uFF09\\uFF0C\\u4F8B\\u5982{fieldA:'hello', fieldB:\", \"['arr1', 'arr2']\", \"}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"layout\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Form \\u8868\\u5355\\u63A7\\u4EF6\\u95F4\\u7684\\u5E03\\u5C40\\uFF0C\\u76EE\\u524D\\u652F\\u6301\\u6C34\\u5E73(horizontal)\\u3001\\u5782\\u76F4(vertical)\\u4E24\\u79CD\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'vertical'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelAlign\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u914D\\u7F6Elabel \\u7684 text-align \\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'left'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelCol\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u5E94\\u7528\\u5728\\u6BCF\\u4E2A Field \\u7684 label \\u6807\\u7B7E\\u5E03\\u5C40\\uFF0C\\u540C\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/grid#Col\"\n  }, \"Col \\u7EC4\\u4EF6\"), \"\\uFF0C\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"span\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"offset\"), \"\\u503C\\uFF0C\\u5982{span: 6, offset: 2}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u914D\\u7F6EField \\u4E2D label \\u7684\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009'top'\\u3001'left'\\u3001'inset'(inset \\u6807\\u7B7E\\u5185\\u5D4C\\u4EC5\\u90E8\\u5206\\u7EC4\\u4EF6\\u652F\\u6301)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'top'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u914D\\u7F6Elabel \\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form \\u66F4\\u65B0\\u65F6\\u89E6\\u53D1\\uFF0C\\u5305\\u62EC\\u8868\\u5355\\u63A7\\u4EF6\\u6302\\u8F7D/\\u5378\\u8F7D/\\u503C\\u53D8\\u66F4/blur/\\u9A8C\\u8BC1\\u72B6\\u6001\\u53D8\\u66F4/\\u9519\\u8BEF\\u63D0\\u793A\\u53D8\\u66F4, \\u5165\\u53C2\\u4E3A formState\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(formState:object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onValueChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form \\u7684\\u503C\\u88AB\\u66F4\\u65B0\\u65F6\\u89E6\\u53D1\\uFF0C\\u4EC5\\u5728\\u8868\\u5355\\u63A7\\u4EF6\\u503C\\u53D1\\u751F\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\\u3002\\u7B2C\\u4E00\\u4E2A\\u5165\\u53C2\\u4E3A formState.values\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u5165\\u53C2\\u4E3A\\u5F53\\u524D\\u53D1\\u751F\\u53D8\\u5316\\u7684 field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(values:object, changedValue: object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onErrorChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"form \\u7684\\u6821\\u9A8C\\u72B6\\u6001\\u88AB\\u66F4\\u65B0\\u65F6\\u89E6\\u53D1\\u3002\\u7B2C\\u4E00\\u4E2A\\u5165\\u53C2\\u4E3A formState.errors\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u5165\\u53C2\\u4E3A\\u5F53\\u524D\\u53D1\\u751F\\u53D8\\u5316\\u7684 field \\u7684\\u540D\\u79F0\\u4E0E\\u6821\\u9A8C\\u7ED3\\u679C\\uFF08v2.66\\u540E\\u63D0\\u4F9B\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(values:object, changedError: object)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onReset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB reset \\u6309\\u94AE\\u6216\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formApi.reset()\"), \"\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function()\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSubmit\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB submit \\u6309\\u94AE\\u6216\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formApi.submitForm()\"), \"\\uFF0C\\u6570\\u636E\\u9A8C\\u8BC1\\u6210\\u529F\\u540E\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(values:object, e: event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSubmitFail\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB submit \\u6309\\u94AE\\u6216\\u8C03\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formApi.submitForm()\"), \"\\uFF0C\\u6570\\u636E\\u9A8C\\u8BC1\\u5931\\u8D25\\u540E\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(errors:object, values:object, e: event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"render\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u4E8E\\u58F0\\u660E\\u8868\\u5355\\u63A7\\u4EF6\\uFF0C\\u4E0D\\u53EF\\u4E0E component\\u3001props.children \\u540C\\u65F6\\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showValidateIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Field \\u5185\\u7684\\u6821\\u9A8C\\u4FE1\\u606F\\u533A\\u5757\\u5426\\u81EA\\u52A8\\u6DFB\\u52A0\\u5BF9\\u5E94\\u72B6\\u6001\\u7684 icon \\u5C55\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u5C06\\u5185\\u8054\\u6837\\u5F0F\\u4F20\\u5165 form \\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopValidateWithError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u5E94\\u7528\\u5728\\u6BCF\\u4E2A Field \\u7684 stopValidateWithError\\uFF0C\\u4F7F\\u7528\\u8BF4\\u660E\\u89C1 Field props\\u4E2D\\u540C\\u540D API \\uFF08v2.42\\u540E\\u63D0\\u4F9B\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopPropagation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u963B\\u6B62 submit\\u6216reset\\u4E8B\\u4EF6\\u5192\\u6CE1\\uFF0C\\u7528\\u4E8E\\u5D4C\\u5957 Form \\u573A\\u666F\\u4E0B\\uFF0C\\u5185\\u90E8 Form submit\\u6216reset\\u65F6\\u963B\\u6B62\\u4E8B\\u4EF6\\u5F80\\u5916\\u4F20\\u64AD\\uFF0C\\u89E6\\u53D1\\u5916\\u90E8Form\\u7684\\u4E8B\\u4EF6\\u3002\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ reset: false, submit: false }\"), \"\\uFF08v2.63\\u540E\\u63D0\\u4F9B\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u5E94\\u7528\\u5728\\u6BCF\\u4E2A Field \\u7684 trigger\\uFF0C\\u4F7F\\u7528\\u8BF4\\u660E\\u8BE6\\u89C1 Field props\\u4E2D\\u540C\\u540D API\\uFF08v2.42\\u540E\\u63D0\\u4F9B\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'change'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateFields\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Form \\u7EA7\\u522B\\u7684\\u81EA\\u5B9A\\u4E49\\u6821\\u9A8C\\u51FD\\u6570\\uFF0Csubmit \\u65F6\\u6216 formApi.validate \\u65F6\\u4F1A\\u88AB\\u8C03\\u7528\\uFF08\\u914D\\u7F6EForm\\u7EA7\\u522B\\u6821\\u9A8C\\u5668\\u540E\\uFF0CField\\u7EA7\\u522B\\u6821\\u9A8C\\u5668\\u5728submit\\u6216formApi.validate()\\u65F6\\u4E0D\\u4F1A\\u518D\\u88AB\\u89E6\\u53D1\\uFF09\\u3002\\u652F\\u6301\\u540C\\u6B65\\u6821\\u9A8C\\u3001\\u5F02\\u6B65\\u6821\\u9A8C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(values)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wrapperCol\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EDF\\u4E00\\u5E94\\u7528\\u5728\\u6BCF\\u4E2A Field \\u4E0A\\u7684\\u5E03\\u5C40\\uFF0C\\u540C\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/grid#Col\"\n  }, \"Col \\u7EC4\\u4EF6\"), \"\\uFF0C\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"span\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"offset\"), \"\\u503C\\uFF0C\\u5982{span: 20, offset: 4}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FormState\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"FormState \\u5B58\\u50A8\\u4E86\\u6240\\u6709 Form \\u5185\\u90E8\\u7684\\u72B6\\u6001\\u503C\\uFF0C\\u5305\\u62EC\\u5404\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u503C\\uFF0C\\u9519\\u8BEF\\u4FE1\\u606F\\u3001touched \\u72B6\\u6001\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8FDB\\u884C\\u8868\\u5355\\u63D0\\u4EA4\\u65F6\\uFF0C\\u5B9E\\u9645\\u63D0\\u4EA4\\u7684\\u5C31\\u662F formState.values\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u521D\\u59CB\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u793A\\u4F8B\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"values\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5355\\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ fieldA: 'str', fieldB: true }\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"errors\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8868\\u5355\\u9519\\u8BEF\\u4FE1\\u606F\\u96C6\\u5408,\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u5224\\u65AD\\u662F\\u5426\\u6709\\u9519\\u8BEF\\u4FE1\\u606F\\u6765\\u51B3\\u5B9A\\u662F\\u5426\\u5141\\u8BB8\\u7528\\u6237\\u63D0\\u4EA4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ fieldA: 'length not valid'}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"touched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u6237\\u70B9\\u51FB\\u8FC7\\u7684 field \\u96C6\\u5408\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{ fieldA: true }\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u8BBF\\u95EE formState\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7\\u8C03\\u7528 formApi.getFormState()\\uFF0C\\u5728 Form \\u5916\\u90E8\\u4E5F\\u53EF\\u4EE5\\u83B7\\u53D6 formState\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#%E6%94%AF%E6%8C%81%E7%9A%84%E5%85%B6%E4%BB%96%E5%86%99%E6%B3%95\"\n  }, \"child render function \\u65B9\\u5F0F\\u58F0\\u660E\\u8868\\u5355\"), \"\\uFF0CformState \\u4F1A\\u4F5C\\u4E3A\\u53C2\\u6570\\u6CE8\\u5165\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#%E6%94%AF%E6%8C%81%E7%9A%84%E5%85%B6%E4%BB%96%E5%86%99%E6%B3%95\"\n  }, \"render props \\u65B9\\u5F0F\\u58F0\\u660E\\u8868\\u5355\"), \"\\uFF0CformState \\u4F1A\\u4F5C\\u4E3A\\u53C2\\u6570\\u6CE8\\u5165\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#useFormState\"\n  }, \"useFormState\"), \" hook\\uFF0CFunctional Component \\u8BBF\\u95EE\\u7236\\u7EA7 Form \\u7684 formState\\uFF0C\\u65E0\\u9700\\u7E41\\u7410\\u7684\\u5F15\\u7528\\u4F20\\u9012\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#HOC-withFormState\"\n  }, \"withFormState\"), \" HOC\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FormApi\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86 FormApi\\u3002\\u4F60\\u5728 Form \\u5185\\u90E8\\u3001\\u5916\\u90E8\\u90FD\\u53EF\\u4EE5\\u5F88\\u65B9\\u4FBF\\u5730\\u83B7\\u53D6\\u5230 formApi\\uFF0C\\u5B83\\u5141\\u8BB8\\u4F60\\u4F7F\\u7528 getter \\u548C setter \\u6765\\u83B7\\u53D6\\u548C\\u64CD\\u4F5C formState \\u7684\\u503C\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u4E0B\\u9762\\u7684\\u8868\\u683C\\u63CF\\u8FF0\\u4E86 formApi \\u4E2D\\u53EF\\u7528\\u7684\\u529F\\u80FD\\u3002\"), mdx(Notice, {\n    title: \"\\u5173\\u4E8E\\u4F5C\\u7528\\u57DF\\u9694\\u79BB\",\n    mdxType: \"Notice\"\n  }, \"\\u4E3A\\u4E86\\u9632\\u6B62\\u7528\\u6237\\u5728\\u8BFB\\u53D6 formState\\u3001values \\u7B49\\u5185\\u90E8\\u72B6\\u6001\\u540E\\uFF0C\\u610F\\u5916\\u64CD\\u4F5C\\u76F4\\u63A5\\u4E86\\u4FEE\\u6539 Form \\u7EC4\\u4EF6\\u7684\\u5185\\u90E8\\u72B6\\u6001\\u7B49\\u60C5\\u51B5\\uFF0CSemi \\u5BF9\\u4E8E formApi.setValue\\u3001setValues\\u7684\\u5165\\u53C2\\u3001formApi.getFormState\\u3001getValue\\u3001getValues\\u7684\\u8FD4\\u56DE\\u7ED3\\u679C\\u90FD\\u4F1A\\u81EA\\u52A8\\u8FDB\\u884C deepClone\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFormProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 Form \\u7EC4\\u4EF6\\u4E0A\\u5F53\\u524D\\u6240\\u6709props\\u7684\\u503C\\uFF0C\\u4F8B\\u5982\\u53EF\\u7528\\u4E8E\\u8BFB\\u53D6 disabled \\u7B49\\u3002v 2.57.0 \\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getFormProps(propNames?: string[])\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFormState\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 FormState\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getFormState()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"submitForm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u624B\\u52A8\\u89E6\\u53D1 submit \\u63D0\\u4EA4\\u64CD\\u4F5C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.submitForm()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"reset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u624B\\u52A8\\u5BF9 form \\u8FDB\\u884C\\u91CD\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.reset(fields?: Array <string\", \">\", \")\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u624B\\u52A8\\u89E6\\u53D1\\u5BF9\\u8868\\u5355\\u7684\\u6821\\u9A8C\\uFF0C\\u4E0D\\u4F20\\u53C2\\u65F6\\u9ED8\\u8BA4\\u89E6\\u53D1\\u6574\\u5168\\u4F53Field\\u7684\\u6821\\u9A8C\\uFF08\\u914D\\u7F6EForm\\u7EA7\\u522B\\u6821\\u9A8C\\u5668\\u540E\\uFF0CField\\u7EA7\\u522B\\u6821\\u9A8C\\u5668\\u5728submit\\u6216formApi.validate()\\u65F6\\u4E0D\\u4F1A\\u518D\\u88AB\\u89E6\\u53D1\\uFF09\\uFF0C\\u82E5\\u60F3\\u89E6\\u53D1\\u90E8\\u5206field\\u7684\\u6821\\u9A8C\\uFF0C\\u5C06\\u76EE\\u6807field\\u6570\\u7EC4\\u4F20\\u5165\\u5373\\u53EF\", mdx(\"br\", null), mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.94.0 \\u7248\\u672C\\u540E\\u652F\\u6301\\u9759\\u9ED8\\u6821\\u9A8C\"), \"\\uFF1A\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ silent: true }\"), \" \\u53EF\\u5728\\u4E0D\\u89E6\\u53D1 UI \\u66F4\\u65B0\\uFF08\\u4E0D\\u663E\\u793A\\u9519\\u8BEF\\u63D0\\u793A\\u3001\\u4E0D\\u8BBE\\u7F6E touched \\u72B6\\u6001\\uFF09\\u7684\\u60C5\\u51B5\\u4E0B\\u83B7\\u53D6\\u6821\\u9A8C\\u7ED3\\u679C\\uFF0C\\u4E5F\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ fields: ['fieldA'], silent: true }\"), \" \\u5BF9\\u6307\\u5B9A\\u5B57\\u6BB5\\u8FDB\\u884C\\u9759\\u9ED8\\u6821\\u9A8C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.validate()\", mdx(\"br\", null), \".then(values=>{})\", mdx(\"br\", null), \".catch(errors=>{}) \", mdx(\"br\", null), \"\\u6216 formApi.validate(\", \"[\", \"'fieldA','fieldB'\", \"]\", \")\", mdx(\"br\", null), \"\\u6216 formApi.validate({ silent: true })\", mdx(\"br\", null), \"\\u6216 formApi.validate({ fields: \", \"[\", \"'fieldA'\", \"]\", \", silent: true })\", mdx(\"br\", null))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setValues\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u6574\\u4E2A\\u8868\\u5355\\u7684\\u503C\\u3002\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570\\u4E2D\\u7684 isOverride \\u9ED8\\u8BA4\\u4E3A false\", mdx(\"br\", null), \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u53EA\\u4F1A\\u4ECE\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"newValues\"), \"\\u4E2D\\u53D6 Form \\u4E2D\\u5DF2\\u5B58\\u5728\\u7684 field \\u7684\\u503C\\u66F4\\u65B0\\u5230\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"formState.values\"), \"\\u4E2D\\u3002\", mdx(\"br\", null), \"\\u5F53 isOverride \\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\"), \"\\u65F6\\uFF0C\\u4F1A\\u76F4\\u63A5\\u4EE5 newValues \\u8986\\u76D6\\u8D4B\\u503C\\u7ED9 formState.values\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setValues(newValues: object, { isOverride: boolean })\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63D0\\u4F9B\\u76F4\\u63A5\\u4FEE\\u6539 formState.values \\u65B9\\u6CD5\\uFF0C\\u4E0E setValues \\u7684\\u533A\\u522B\\u662F\\u5B83\\u4EC5\\u4FEE\\u6539\\u5355\\u4E2A field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setValue(field: string, newFieldValue: any)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 \\u5355\\u4E2A Field \\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getValue() \", mdx(\"br\", null), \"formApi.getValue(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getValues\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 \\u6240\\u6709 Field \\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getValues()\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setTouched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4FEE\\u6539 formState.touched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setTouched(field: string, isTouched: boolean) \", mdx(\"br\", null))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getTouched\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 Field \\u7684 touched \\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getTouched(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4FEE\\u6539 \\u67D0\\u4E2A field \\u7684 error \\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.setError(field: string, fieldErrorMessage: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 Field \\u7684 error \\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getError(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getFieldExist\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u83B7\\u53D6 Form \\u4E2D\\u662F\\u5426\\u5B58\\u5728\\u5BF9\\u5E94\\u7684 field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.getFieldExist(field: string)\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollToField\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6EDA\\u52A8\\u81F3\\u6307\\u5B9A\\u7684 field, \\u7B2C\\u4E8C\\u4E2A\\u5165\\u53C2\\u5C06\\u900F\\u4F20\\u81F3scroll-into-view-if-needed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.scrollToField(field: string, scrollOpts: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/stipsan/scroll-into-view-if-needed#options\"\n  }, \"ScrollIntoViewOptions\"), \")\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"scrollToError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6EDA\\u52A8\\u81F3\\u6821\\u9A8C\\u9519\\u8BEF\\u7684field\\uFF0C\\u53EF\\u4F20\\u6307\\u5B9A field \\u6216\\u8005 index\\uFF0C\\u4F20\\u5165 index \\u5219\\u6EDA\\u52A8\\u5230\\u7B2C index \\u4E2A\\u9519\\u8BEF\\u7684 DOM\\uFF0C\\u82E5\\u4E0D\\u4F20\\u53C2\\u5219\\u6EDA\\u52A8\\u5230DOM\\u6811\\u4E2D\\u7B2C\\u4E00\\u4E2A\\u6821\\u9A8C\\u51FA\\u9519\\u7684\\u4F4D\\u7F6E\\u3002 v2.61.0\\u540E\\u63D0\\u4F9B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"formApi.scrollToError(\", mdx(ApiType, {\n    detail: \"{field?: string; index?: number; scrollOpts?: ScrollIntoViewOptions }\",\n    mdxType: \"ApiType\"\n  }, \"ScrollToErrorOptions\"), \")\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u83B7\\u53D6 formApi\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Form.useForm()\"), \" \\u5728 Form \\u5916\\u90E8\\u521B\\u5EFA formApi\\uFF0C\\u7136\\u540E\\u901A\\u8FC7 props.form \\u4F20\\u5165 Form \\u7EC4\\u4EF6\\u3002\\u8FD9\\u79CD\\u65B9\\u5F0F\\u5141\\u8BB8\\u4F60\\u5728 Form \\u6E32\\u67D3\\u524D\\u5C31\\u83B7\\u53D6 formApi\\uFF0C\\u9002\\u5408\\u9700\\u8981\\u5728\\u7EC4\\u4EF6\\u5916\\u90E8\\u63A7\\u5236\\u8868\\u5355\\u7684\\u573A\\u666F\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Form \\u7EC4\\u4EF6\\u5728 ComponentDidMount \\u9636\\u6BB5\\uFF0C\\u4F1A\\u6267\\u884C props \\u4F20\\u5165\\u7684 getFormApi \\u56DE\\u8C03\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u56DE\\u8C03\\u51FD\\u6570\\u4E2D\\u4FDD\\u5B58 formApi \\u7684\\u5F15\\u7528\\uFF0C\\u4EE5\\u4FBF\\u540E\\u7EED\\u8FDB\\u884C\\u8C03\\u7528(\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u793A\\u4F8B\\u5982\\u4E0B\\u4EE3\\u7801\"), \")\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u6211\\u4EEC\\u8FD8\\u63D0\\u4F9B\\u4E86\\u5176\\u4ED6\\u65B9\\u5F0F\\u83B7\\u53D6 formApi\\uFF0C\\u4F60\\u53EF\\u4EE5\\u6839\\u636E\\u559C\\u597D\\u9009\\u62E9\\u4E0D\\u540C\\u7684\\u8C03\\u7528\\u65B9\\u5F0F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 ref \\u7684\\u65B9\\u5F0F\\u83B7\\u53D6 Form \\u7EC4\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u76F4\\u63A5\\u8BBF\\u95EE\\u5B9E\\u4F8B\\u4E0A\\u7684 formApi\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#%E6%94%AF%E6%8C%81%E7%9A%84%E5%85%B6%E4%BB%96%E5%86%99%E6%B3%95\"\n  }, \"child render function \\u65B9\\u5F0F\\u58F0\\u660E\\u8868\\u5355\"), \"\\uFF0CformApi \\u4F1A\\u4F5C\\u4E3A\\u53C2\\u6570\\u6CE8\\u5165\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#%E6%94%AF%E6%8C%81%E7%9A%84%E5%85%B6%E4%BB%96%E5%86%99%E6%B3%95\"\n  }, \"render props \\u65B9\\u5F0F\\u58F0\\u660E\\u8868\\u5355\"), \"\\uFF0CformApi \\u4F1A\\u4F5C\\u4E3A\\u53C2\\u6570\\u6CE8\\u5165\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#useFormApi\"\n  }, \"useFormApi\"), \" hook\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"#HOC-withFormApi\"\n  }, \"withFormApi\"), \" HOC\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 Form.useForm()\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Form.useForm()\"), \" \\u7528\\u4E8E\\u5728 Form \\u7EC4\\u4EF6\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5916\\u90E8\\u521B\\u5EFA\"), \" formApi \\u5B9E\\u4F8B\\uFF0C\\u9002\\u5408\\u9700\\u8981\\u5728 Form \\u6E32\\u67D3\\u524D\\u5C31\\u63A7\\u5236\\u8868\\u5355\\u7684\\u573A\\u666F\\u3002\\u5B83\\u8FD4\\u56DE\\u4E00\\u4E2A\\u6570\\u7EC4 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[formApi, formState, formValues]\"), \"\\u3002\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \">=2.94.0\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"Form.useForm() \\u4E0E useFormApi \\u7684\\u533A\\u522B\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, mdx(\"strong\", null, \"Form.useForm()\"), \"\\uFF1A\\u5728 Form \", mdx(\"strong\", null, \"\\u5916\\u90E8\\u521B\\u5EFA\"), \" formApi\\uFF0C\\u9700\\u8981\\u901A\\u8FC7 props.form \\u4F20\\u5165 Form \\u7EC4\\u4EF6\\u3002\\u7528\\u4E8E\\u7236\\u7EC4\\u4EF6\\u63A7\\u5236\\u5B50 Form \\u7684\\u573A\\u666F\\u3002\"), mdx(\"div\", null, mdx(\"strong\", null, \"useFormApi\"), \"\\uFF1A\\u5728 Form \", mdx(\"strong\", null, \"\\u5185\\u90E8\\u83B7\\u53D6\"), \" formApi\\uFF0C\\u7528\\u4E8E Form \\u7684\\u5B50\\u7EC4\\u4EF6\\u8BBF\\u95EE\\u7236\\u7EA7 Form\\u3002\\u8BE6\\u89C1 [useFormApi](#useFormApi)\\u3002\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u793A\\u4F8B\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    // \\u5728 Form \\u5916\\u90E8\\u521B\\u5EFA formApi\\n    const [formApi, formState, formValues] = Form.useForm();\\n\\n    const handleClick = () => {\\n        // \\u5728 Form \\u5916\\u90E8\\u8C03\\u7528 formApi\\n        formApi.setValue('username', 'semi');\\n        console.log('\\u5F53\\u524D\\u8868\\u5355\\u503C\\uFF1A', formValues);\\n    };\\n\\n    return (\\n        <>\\n            <Button onClick={handleClick}>\\u5916\\u90E8\\u8BBE\\u7F6E\\u503C</Button>\\n            <Button onClick={() => formApi.reset()}>\\u91CD\\u7F6E\\u8868\\u5355</Button>\\n            \\n            {/* \\u5C06 formApi \\u4F20\\u5165 Form \\u7EC4\\u4EF6 */}\\n            <Form form={formApi}>\\n                <Form.Input field='username' label='\\u7528\\u6237\\u540D' />\\n                <Form.Input field='email' label='\\u90AE\\u7BB1' />\\n            </Form>\\n            \\n            <div style={{ marginTop: 16 }}>\\n                <div>\\u8868\\u5355\\u503C\\uFF1A{JSON.stringify(formValues)}</div>\\n                <div>touched \\u72B6\\u6001\\uFF1A{JSON.stringify(formState.touched)}</div>\\n            </div>\\n        </>\\n    );\\n};\\n\")), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n    mdxType: \"Notice\"\n  }, \"\\u4F7F\\u7528 `Form.useForm()` \\u521B\\u5EFA\\u7684 formApi \\u5728 Form \\u7EC4\\u4EF6\\u6302\\u8F7D\\u524D\\u8C03\\u7528\\u65B9\\u6CD5\\u65F6\\uFF0C\\u4F1A\\u5728\\u63A7\\u5236\\u53F0\\u8F93\\u51FA\\u8B66\\u544A\\u3002\\u5EFA\\u8BAE\\u5728 Form \\u6302\\u8F7D\\u540E\\u518D\\u8C03\\u7528 formApi \\u7684\\u65B9\\u6CD5\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    // \\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u901A\\u8FC7useRef\\u5B58\\u50A8formApi\\n    const api = useRef();\\n\\n    return (\\n        <Form getFormApi={formApi => api.current = formApi}>\\n            <Form.Input field='a' />\\n            <Button onClick={()=>{console.log(api);}}>log</Button>\\n        </Form>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nimport { Form, Button } from '@douyinfe/semi-ui';\\n\\nclass FormApiDemo extends React.Component {\\n    constructor() {\\n        super();\\n        this.getFormApi = this.getFormApi.bind(this);\\n        this.formBRef = React.createRef();\\n    }\\n\\n    getFormApi(formApi) {\\n        this.formApi = formApi;\\n        // \\u83B7\\u53D6\\u5230formApi\\u5BF9\\u8C61\\u540E\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528\\u5B83\\u6765\\u5BF9\\u8868\\u5355\\u8FDB\\u884C\\u4EFB\\u4F55\\u4F60\\u60F3\\u505A\\u7684\\u4FEE\\u6539 ~\\n    }\\n\\n    changeValues() {\\n        // \\u4F7F\\u7528 FormA\\u7684 formApi\\n        this.formApi.setValues({ a: 1 });\\n        // \\u4F7F\\u7528 FormB\\u7684 formApi\\n        this.formBRef.current.formApi.setValues({ b: 2 });\\n    }\\n\\n    render() {\\n        return (\\n            <>\\n                {/* \\u901A\\u8FC7getFormApi\\u56DE\\u8C03\\u83B7\\u53D6\\u5E76\\u4FDD\\u5B58formApi */}\\n                <Form getFormApi={this.getFormApi} />\\n                {/* \\u901A\\u8FC7ref\\u76F4\\u63A5\\u83B7\\u53D6Form\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4E0A\\u7684formApi */}\\n                <Form ref={this.formBRef} />\\n                <Button onClick={()=>this.changeValues()}>Change</Button>\\n            </>\\n        );\\n    }\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Field Props\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"\\u5173\\u4E8EField ref\",\n    mdxType: \"Notice\"\n  }, \"v1.30.0\\u4E4B\\u524D\\u7684\\u7248\\u672C\\uFF0CField\\u7EC4\\u4EF6\\u5E76\\u4E0D\\u4F1A\\u505Aref\\u8F6C\\u53D1\", mdx(\"br\", null), \"v1.30\\u540E\\u53EF\\u76F4\\u63A5\\u901A\\u8FC7ref\\u83B7\\u53D6\\u5E95\\u5C42\\u63A7\\u4EF6\\u5B9E\\u4F8B\\uFF0C\\u4F8B\\u5982\\u7ED9Form.Input\\u3001Form.Select\\u6307\\u5B9Aref\\uFF0C\\u76F4\\u63A5\\u83B7\\u53D6\\u5230\\u5E95\\u5C42\\u539F\\u59CBInput\\u3001Select\\u7EC4\\u4EF6\\u7684ref\\u5F15\\u7528\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"convert\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"field \\u503C\\u6539\\u53D8\\u540E\\uFF0C\\u5728 rerender \\u524D\\uFF0C\\u5BF9 filed \\u7684\\u503C\\u8FDB\\u884C\\u4E8C\\u6B21\\u66F4\\u65B0\", mdx(\"br\", null), \" \\u4F7F\\u7528\\u793A\\u4F8B: (value) => newValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(fieldValue)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u503C\\u5728 formState.values \\u4E2D\\u7684\\u6620\\u5C04\\u8DEF\\u5F84\\uFF0CForm \\u4F1A\\u4F7F\\u7528\\u8BE5\\u503C\\u6765\\u533A\\u5206\\u5185\\u90E8\\u7684\\u8868\\u5355\\u63A7\\u4EF6\", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u5FC5\\u586B!!!\"), \" \\u793A\\u4F8B\\uFF1A\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6%E5%80%BC%E7%9A%84%E7%BB%91%E5%AE%9A\"\n  }, \"Bindding Syntax\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684 label \\u6807\\u7B7E\\u6587\\u672C\\uFF0C\\u4E0D\\u4F20\\u7684\\u65F6\\u5019\\u9ED8\\u8BA4\\u4E0E field \\u540C\\u540D, \\u4F20\\u5165 object \\u65F6\\u4F1A\\u5C06\\u5176\\u900F\\u4F20\\u7ED9 Form.Label\\uFF0C\\u5177\\u4F53\\u914D\\u7F6E\\u8BF7\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Form.Label\"\n  }, \"Label\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684 label \\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009'top'/'left'/'inset'\\u3002\\u5728Form\\u4E0EField\\u4E0A\\u540C\\u65F6\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5Field props\\u4E3A\\u51C6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelAlign\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684 label \\u6587\\u672C\\u7684 text-align\\u3002\\u5728Form\\u4E0EField\\u4E0A\\u540C\\u65F6\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5Field props\\u4E3A\\u51C6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684 label \\u6587\\u672C\\u7684 width\\u3002\\u5728Form\\u4E0EField\\u4E0A\\u540C\\u65F6\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5Field props\\u4E3A\\u51C6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"noLabel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u4F60\\u4E0D\\u9700\\u8981\\u81EA\\u52A8\\u6DFB\\u52A0 label \\u65F6\\uFF0C\\u53EF\\u4EE5\\u5C06\\u8BE5\\u503C\\u7F6E\\u4E3A true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"noErrorMessage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u4F60\\u4E0D\\u9700\\u8981\\u81EA\\u52A8\\u6DFB\\u52A0 ErrorMessage \\u6A21\\u5757\\u65F6\\uFF0C\\u53EF\\u4EE5\\u5C06\\u8BE5\\u503C\\u7F6E\\u4E3A true\\uFF0C\\u6CE8\\u610F\\u6B64\\u65F6 helpText \\u4E5F\\u4E0D\\u4F1A\\u88AB\\u5C55\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63A7\\u4EF6\\u540D\\u79F0\\uFF0C\\u4F20\\u5165\\u65F6\\u4F1A\\u81EA\\u52A8\\u5728\\u5BF9\\u5E94 field wrapper div \\u8FFD\\u52A0\\u5BF9\\u5E94\\u7684 className\\uFF0C\\u5982\\uFF1Aabc => '.semi-form-field-abc'\\u3002 v2.24 \\u540E\\uFF0C\\u8FD8\\u4F1A\\u5C06 name \\u900F\\u4F20\\u81F3\\u5E95\\u5C42\\u7EC4\\u4EF6\\u6D88\\u8D39\\uFF0C\\u4F8B\\u5982\\u4F60\\u53EF\\u4EE5\\u7528\\u4E8E\\u914D\\u7F6E input\\u7684name\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6574\\u4E2A fieldWrapper \\u7684 className\\uFF0C\\u4F5C\\u7528\\u4E0E name \\u53C2\\u6570\\u4E00\\u81F4\\uFF0C\\u533A\\u522B\\u662F\\u4E0D\\u4F1A\\u81EA\\u52A8\\u8FFD\\u52A0\\u524D\\u7F00\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fieldStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6574\\u4E2A fieldWrapper \\u7684 \\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"initValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u521D\\u59CB\\u503C\\uFF08\\u4EC5\\u5728 Field mounted \\u65F6\\u6D88\\u8D39\\u4E00\\u6B21\\uFF0C\\u540E\\u7EED\\u66F4\\u65B0\\u65E0\\u6548\\uFF09\\uFF0C\\u76F8\\u6BD4 Form \\u7684 initValues \\u4E2D\\u7684\\u503C\\uFF0C\\u5B83\\u7684\\u4F18\\u5148\\u7EA7\\u66F4\\u9AD8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any\\uFF08\\u7C7B\\u578B\\u53D6\\u51B3\\u4E8E\\u5F53\\u524D\\u7EC4\\u4EF6\\uFF0C\\u8BE6\\u7EC6\\u89C1\\u5404\\u7EC4\\u4EF6\\u7684 api\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u7684\\u81EA\\u5B9A\\u4E49\\u6821\\u9A8C\\u51FD\\u6570\\u3002\\u652F\\u6301\\u540C\\u6B65\\u3001\\u5F02\\u6B65\\u6821\\u9A8C\\uFF08\\u901A\\u8FC7\\u8FD4\\u56DEpromise\\uFF09\\u3002\", mdx(\"br\", null), \"\\u8BBE\\u7F6E\\u4E86 validate \\u65F6\\uFF0Crules \\u4E0D\\u4F1A\\u751F\\u6548\", mdx(\"br\", null), \" \\u4F7F\\u7528\\u793A\\u4F8B\\uFF1A(fieldValue, values) => fieldValue >= 5 ? 'value not valid': ''\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(fieldValue, values)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rules\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6821\\u9A8C\\u89C4\\u5219\\uFF0C\\u6821\\u9A8C\\u5E93\\u57FA\\u4E8E\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://github.com/yiminghe/async-validator\"\n  }, \"async-validator\"), \" \", mdx(\"br\", null), \" \\u4F7F\\u7528\\u793A\\u4F8B\\uFF1Aconst rules=\", \"[\", \"{ required: true, message: 'can't be null ' },\", mdx(\"br\", null), \"{ max: 10, message: 'can't more than 10 word' }\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u6821\\u9A8C\\u7ED3\\u679C\\u72B6\\u6001\\uFF08\\u4EC5\\u5F71\\u54CD\\u6837\\u5F0F\\uFF09\\uFF0C\\u53EF\\u9009\\u503C:\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"error\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"trigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E6\\u53D1\\u6821\\u9A8C\\u7684\\u65F6\\u673A\\uFF0C\\u53EF\\u9009\\u503C:\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"blur\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"change\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"custom\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mount\"), \"\\uFF0C\\u6216\\u4EE5\\u4E0A\\u503C\\u7684\\u7EC4\\u5408\", \"[\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'blur'\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'change'\"), \"]\", mdx(\"br\", null), \"1\\u3001\\u8BBE\\u7F6E\\u4E3A custom \\u65F6\\uFF0C\\u4EC5\\u4F1A\\u7531 formApi/fieldApi \\u89E6\\u53D1\\u6821\\u9A8C\\u65F6\\u88AB\\u89E6\\u53D1\", mdx(\"br\", null), \"2\\u3001mount\\uFF08\\u6302\\u8F7D\\u65F6\\u5373\\u89E6\\u53D1\\u4E00\\u6B21\\u6821\\u9A8C\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string/array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'change'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u503C\\u53D8\\u5316\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(filedValue: any \", \"|\", \" ev: { target: { value: any }}) \", mdx(\"br\", null), \"\\uFF08\\u5177\\u4F53\\u53C2\\u89C1\\u5404\\u7EC4\\u4EF6\\u7684 onChange \\u65B9\\u6CD5\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onBlur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5931\\u53BB\\u7126\\u70B9\\u65F6\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function() \\uFF08\\u5177\\u4F53\\u53C2\\u89C1\\u5404\\u7EC4\\u4EF6\\u7684 onBlur \\u65B9\\u6CD5\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6821\\u9A8C\\u524D\\u8F6C\\u6362\\u5B57\\u6BB5\\u503C\\uFF0C\\u8F6C\\u6362\\u540E\\u7684\\u503C\\u4EC5\\u4F1A\\u5728\\u6821\\u9A8C\\u65F6\\u88AB\\u6D88\\u8D39\\uFF0C\\u5BF9 formState \\u65E0\\u5F71\\u54CD\", mdx(\"br\", null), \" \\u4F7F\\u7528\\u793A\\u4F8B: (value) => Number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(fieldValue)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"allowEmptyString\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5141\\u8BB8\\u503C\\u4E3A\\u7A7A\\u5B57\\u7B26\\u4E32\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u503C\\u4E3A''\\u65F6\\uFF0C\\u8BE5 field \\u5BF9\\u5E94\\u7684 key \\u4F1A\\u4ECE values \\u4E2D\\u79FB\\u9664\\uFF0C\\u5982\\u679C\\u4F60\\u5E0C\\u671B\\u4FDD\\u7559\\u8BE5 key\\uFF0C\\u90A3\\u4E48\\u9700\\u8981\\u5C06 allowEmptyString \\u8BBE\\u4E3A true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stopValidateWithError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E3A true \\u65F6\\uFF0C\\u4F7F\\u7528 rules \\u6821\\u9A8C\\uFF0C\\u78B0\\u5230\\u7B2C\\u4E00\\u4E2A\\u68C0\\u9A8C\\u4E0D\\u901A\\u8FC7\\u7684 rules \\u540E\\uFF0C\\u5C06\\u4E0D\\u518D\\u89E6\\u53D1\\u540E\\u7EED rules \\u7684\\u6821\\u9A8C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"helpText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u63D0\\u793A\\u4FE1\\u606F\\uFF0C\\u4E0E\\u6821\\u9A8C\\u4FE1\\u606F\\u516C\\u7528\\u540C\\u4E00\\u533A\\u5757\\u5C55\\u793A\\uFF0C\\u4E24\\u8005\\u5747\\u6709\\u503C\\u65F6\\uFF0C\\u4F18\\u5148\\u5C55\\u793A\\u6821\\u9A8C\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u989D\\u5916\\u7684\\u63D0\\u793A\\u4FE1\\u606F\\uFF0C\\u5F53\\u9700\\u8981\\u9519\\u8BEF\\u4FE1\\u606F\\u548C\\u63D0\\u793A\\u6587\\u6848\\u540C\\u65F6\\u51FA\\u73B0\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8FD9\\u4E2A\\uFF0C\\u4F4D\\u4E8E helpText/errorMessage \\u540E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pure\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4EC5\\u63A5\\u7BA1\\u6570\\u636E\\u6D41\\uFF0C\\u4E3A true \\u65F6\\u4E0D\\u4F1A\\u81EA\\u52A8\\u63D2\\u5165 ErrorMessage\\u3001Label\\u3001extraText \\u7B49\\u6A21\\u5757\\uFF0C\\u6837\\u5F0F\\u3001DOM \\u7ED3\\u6784\\u4E0E\\u539F\\u59CB\\u7684\\u7EC4\\u4EF6\\u4FDD\\u6301\\u4E00\\u81F4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraTextPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63A7\\u5236extraText\\u7684\\u663E\\u793A\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \"\\uFF08\\u5782\\u76F4\\u65B9\\u5411\\u4EE5Label\\u3001extraText\\u3001Field\\u4E3B\\u4F53\\u7684\\u987A\\u5E8F\\u663E\\u793A\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" (\\u5782\\u76F4\\u65B9\\u5411\\u4EE5Label\\u3001Field\\u4E3B\\u4F53\\u3001extraText\\u7684\\u987A\\u5E8F\\u663E\\u793A)\\uFF1B\\u5728Form\\u4E0EField\\u4E0A\\u540C\\u65F6\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5Field props\\u4E3A\\u51C6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"...other\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u4EF6\\u7684\\u5176\\u4ED6\\u53EF\\u914D\\u7F6E\\u5C5E\\u6027\\uFF0C\\u4E0E\\u4E0A\\u9762\\u7684\\u5C5E\\u6027\\u5E73\\u7EA7\\u4E00\\u5E76\\u4F20\\u5165\\u5373\\u53EF\\uFF0C\\u4F8B\\u5982 Input \\u7684 size/placeholder\\uFF0C\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"Field \\u4F1A\\u5C06\\u5176\\u900F\\u4F20\\u81F3\\u7EC4\\u4EF6\\u672C\\u8EAB\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"ArrayField Props\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9488\\u5BF9\\u52A8\\u6001\\u589E\\u5220\\u7684\\u6570\\u7EC4\\u7C7B\\u8868\\u5355\\u9879\\uFF0C\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86 ArrayField \\u4F5C\\u7528\\u57DF\\u6765\\u7B80\\u5316 add/remove \\u7684\\u64CD\\u4F5C\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"field\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684\\u503C\\u5728 formState.values \\u4E2D\\u7684\\u6620\\u5C04\\u8DEF\\u5F84\", mdx(\"br\", null), \"\\u5FC5\\u586B\\uFF0C\\u4F8B\\u5982\\u5B58\\u5728 ArrayField\\u8D1F\\u8D23 a\", \"[0]\", \".name\\u3001a\", \"[1]\", \".name\\u3001a\", \"[2]\", \".name\\u4E09\\u884C\\u6E32\\u67D3\\uFF0C\\u4ED6\\u4EEC\\u7684\\u7236\\u7EA7\\u4E3Aa\\uFF0C\\u6B64\\u5904props.field\\u5E94\\u4E3A a\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"initValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ArrayField\\u7684\\u521D\\u59CB\\u503C\\uFF0C\\u5982\\u679C\\u540C\\u65F6\\u5728 formProps.initValues \\u4E0E arrayFieldProps.initValue \\u4E2D\\u90FD\\u914D\\u7F6E\\u4E86\\u521D\\u59CB\\u503C\\uFF0C\\u540E\\u8005\\u4F18\\u5148\\u7EA7\\u66F4\\u9AD8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ArrayField\\u7684\\u5185\\u5BB9\\uFF0C\\u7C7B\\u578B\\u4E3A Function\\uFF0C\\u51FD\\u6570\\u5165\\u53C2\\u4E3A add\\u3001addWithInitValue \\u7B49\\u64CD\\u4F5C\\u51FD\\u6570 \\u53CA arrayFields\\uFF0C\\u6267\\u884C\\u540E\\u5E94\\u5F53\\u8FD4\\u56DE ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function(ArrayFieldChildrenProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface ArrayFieldChildrenProps {\\n    arrayFields: ArrayFieldItem<>;                               // \\u5F53\\u524D\\u6570\\u7EC4\\u8868\\u5355\\uFF0C\\u53EF\\u4EE5\\u7528\\u6765\\u6267\\u884Cmap\\u64CD\\u4F5C\\u6E32\\u67D3\\u51FA\\u6BCF\\u4E00\\u884C\\n    add: () => void;                                             // \\u65B0\\u589E\\u7A7A\\u767D\\u884C\\n    addWithInitValue: (lineObject: Record<string, any>) => void; // \\u65B0\\u589E\\u4E00\\u4E2A\\u5E26\\u521D\\u59CB\\u503C\\u7684\\u884C\\n}\\n\\ninterface ArrayFieldItem {\\n    key: string;        // \\u4E00\\u4E2A\\u7528\\u4E8E\\u6807\\u8BC6\\u5F53\\u524D\\u884C\\u7684key\\uFF0C\\u5E94\\u5F53\\u7ED1\\u5B9A\\u5728\\u5F53\\u524D\\u884C\\u7684 wrapper \\u4E0A\\n    field: string;      // \\u672C\\u884C fieldPath, \\u5B83\\u7B49\\u540C\\u4E8E ArrayFieldProps.field + [index]\\n    remove: () => void; // \\u79FB\\u9664\\u672C\\u884C\\u7684\\u64CD\\u4F5C\\u51FD\\u6570\\uFF0C\\u8C03\\u7528\\u65F6\\u5C06\\u76F4\\u63A5\\u5220\\u9664\\u672C\\u884C\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.Section\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Section } = Form;\\n\")), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BB5\\u843D\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BB5\\u843D\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.Label\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0CLabel \\u4F1A\\u7531 Form \\u81EA\\u884C\\u63D2\\u5165\\u5230\\u6BCF\\u4E2A Field \\u4E2D\\u3002\\u5982\\u679C\\u4F60\\u9700\\u8981\\u5728\\u5176\\u4ED6\\u5730\\u65B9\\u81EA\\u884C\\u63D2\\u5165 Label\\uFF0C\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86 Label \\u7EC4\\u4EF6\\u53EF\\u4EE5\\u5BFC\\u51FA\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Label } = Form;\\n\")), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label \\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5FC5\\u586B\\u7684\", \"*\", \"\\u53F7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extra\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8DDF\\u968F\\u5728 required \\u540E\\u7684\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text-align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'left'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"label \\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number/string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"optional\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u5728text\\u540E\\u8FFD\\u52A0\\\"\\uFF08\\u53EF\\u9009\\uFF09\\\"\\u6587\\u5B57\\u6807\\u8BC6\\uFF08\\u6839\\u636ELocale\\u914D\\u7F6E\\u7684\\u4E0D\\u540C\\u8BED\\u8A00\\u81EA\\u52A8\\u5207\\u6362\\u76F8\\u540C\\u8BED\\u4E49\\u6587\\u672C\\uFF09\\u3002\\u5F53\\u8BE5\\u9879\\u4E3Atrue\\u65F6\\uFF0Crequired\\u7684\", \"*\", \"\\u53F7\\u5C06\\u4E0D\\u518D\\u5C55\\u793A\\u3002\\u82E5\\u5F53\\u8868\\u5355\\u9879\\u591A\\u6570\\u5747\\u4E3A\\u5FC5\\u586B\\u65F6\\uFF0C\\u4EC5\\u5F3A\\u8C03\\u53EF\\u9009\\u9879\\u4F1A\\u66F4\\u4F7F\\u5F97\\u6574\\u4F53\\u89C6\\u89C9\\u66F4\\u7B80\\u6D01\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.18.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.InputGroup\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"InputGroup \\u7684 label \\u6807\\u7B7E\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Label \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u8868\\u5355\\u63A7\\u4EF6\\u7684 label \\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009'top'/'left'/'inset'\\u3002\\u5728 Form \\u4E0E InputGroup \\u540C\\u65F6\\u4F20\\u5165\\u65F6\\uFF0C\\u4EE5 InputGroup props\\u4E3A\\u51C6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'top'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u989D\\u5916\\u7684\\u63D0\\u793A\\u4FE1\\u606F\\uFF0C\\u5F53\\u9700\\u8981\\u9519\\u8BEF\\u4FE1\\u606F\\u548C\\u63D0\\u793A\\u6587\\u6848\\u540C\\u65F6\\u51FA\\u73B0\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u8FD9\\u4E2A\\uFF0C\\u4F4D\\u4E8E errorMessage \\u540E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.29.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"extraTextPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63A7\\u5236extraText\\u7684\\u663E\\u793A\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \"\\uFF08\\u5782\\u76F4\\u65B9\\u5411\\u4EE5Label\\u3001extraText\\u3001Group\\u7684\\u987A\\u5E8F\\u663E\\u793A\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \" (\\u5782\\u76F4\\u65B9\\u5411\\u4EE5Label\\u3001Group\\u3001extraText\\u7684\\u987A\\u5E8F\\u663E\\u793A)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'bottom'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.29.0\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53 extraTextPositon \\u4E3A middle\\uFF0C\\u4E14 labelPosition \\u4E3A left\\u65F6\\u3002\\u7531\\u4E8E extraText\\u5141\\u8BB8\\u4E3A ReactNode\\uFF0C\\u5185\\u5BB9\\u9AD8\\u5EA6\\u4E0D\\u5B9A\\uFF0CLabel\\u5C06\\u4E0D\\u518D\\u786E\\u4FDD\\u80FD\\u4E0E Field / InputGroup \\u4E2D\\u7684\\u9996\\u884C\\u6587\\u672C\\u5BF9\\u9F50\\u3002 \")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.Slot\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { Slot } = Form;\\n\")), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"slot \\u7684\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Form.Label\"\n  }, \"Label \\u914D\\u7F6E\"), \", \\u4F8B\\u5982{ text: 'semi', align: 'left' }\\uFF1B\\u4E5F\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F20\\u5165 string\\uFF0CSlot \\u5185\\u90E8\\u4F1A\\u81EA\\u52A8\\u5C01\\u88C5\\u6210\\u5408\\u6CD5 Label \\u683C\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"string\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"labelPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"slot \\u7684 label \\u4F4D\\u7F6E\\uFF0C\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u7EE7\\u627F\\u81EA Form props\\uFF0C\\u4E5F\\u53EF\\u5355\\u72EC\\u8986\\u76D6\\u3002\\u53EF\\u9009'top'\\u3001'left'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"slot \\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"slot \\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"slot \\u7684\\u4E3B\\u4F53\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"error\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"slot \\u7684\\u9519\\u8BEF\\u63D0\\u793A\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ErrorMessage\", \"|\", \"ReactNode\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Form.ErrorMessage\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Form } from '@douyinfe/semi-ui';\\nconst { ErrorMessage } = Form;\\n\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 error \\u4E3A ReactNode\\u3001String\\u3001Boolean \\u65F6\\uFF0C\\u76F4\\u63A5\\u6E32\\u67D3\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 error \\u4E3A\\u6570\\u7EC4\\u65F6\\uFF0C\\u4F1A\\u81EA\\u52A8\\u6267\\u884C join \\u64CD\\u4F5C\\u805A\\u5408\\u6570\\u7EC4\\u5185\\u7684\\u9519\\u8BEF\\u4FE1\\u606F\")), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"error\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9519\\u8BEF\\u4FE1\\u606F\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"array\", \"|\", \"ReactNode\", \"|\", \"boolean\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showValidateIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u52A0\\u4E0A validateStatus \\u5BF9\\u5E94\\u7684 icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateStatus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4FE1\\u606F\\u6240\\u5C5E\\u7684\\u6821\\u9A8C\\u72B6\\u6001\\uFF0C\\u53EF\\u9009 default/error/warning/success\\uFF08success\\u4E00\\u822C\\u5EFA\\u8BAE\\u4E0Edefault\\u6837\\u5F0F\\u76F8\\u540C\\uFF09\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"withFieldOption\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"key\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"valueKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u4EF6\\u8868\\u793A\\u503C\\u7684\\u5C5E\\u6027\\uFF0C\\u5982 Switch\\u3001Radio \\u7684\\u662F'checked'\\uFF0CInput \\u7684\\u662F'value'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'value'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onKeyChangeFnName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u4EF6\\u503C\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\\uFF0C\\u4E00\\u822C\\u4E3A'onChange'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'onChange'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"valuePath\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u503C\\u5C5E\\u6027\\u5728\\u56DE\\u8C03\\u51FD\\u6570\\u4E2D\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u7684\\u8DEF\\u5F84,\\u5982 Radio \\u7684 onChange(e.target.checked)\\uFF0C\\u90A3\\u4E48\\u8BE5\\u503C\\u9700\\u8981\\u8BBE\\u4E3A target.checkd\\uFF1BRadioGroup \\u7684 onChange(e.target.value)\\uFF0C\\u8BE5\\u503C\\u4E3A'target.value'\\uFF1B\\u82E5\\u7B2C\\u4E00\\u4E2A\\u53C2\\u6570\\u5C31\\u662F\\u503C\\u672C\\u8EAB\\uFF0C\\u65E0\\u9700\\u518D\\u5F80\\u4E0B\\u53D6\\u503C\\uFF0C\\u8BE5\\u9879\\u4E0D\\u9700\\u8981\\u8BBE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\"\n  }, \"aria-labelledby\"), \"\\u3001for\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Field \\u7EC4\\u4EF6\\uFF0C\\u4F1A\\u81EA\\u52A8\\u6DFB\\u52A0 label DOM\\u3002label \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"for\"), \" \\u5C5E\\u6027\\u4E0E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.id\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.name\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.field\"), \" \\u76F8\\u540C \\uFF1Blabel \\u7684id \\u5C5E\\u6027\\u7531 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.id\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.name\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props.field\"), \" \\u51B3\\u5B9A\\uFF0C\\u503C\\u683C\\u5F0F\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-label\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Form \\u6216\\u8005 Field \\u7684 props.labelPosition \\u8BBE\\u7F6E\\u4E3A inset\\u65F6\\uFF0C\\u6B64\\u65F6\\u4E0D\\u5B58\\u5728 label \\u6807\\u7B7E\\uFF0C\\u800C\\u662F div \\u6807\\u7B7E\\u3002insetLabel \\u5BF9\\u5E94\\u7684 div \\u6807\\u7B7E\\u4F1A\\u88AB\\u81EA\\u52A8\\u8FFD\\u52A0 id\\uFF0C\\u503C\\u4E0E\\u4E0A\\u8FF0 label \\u7684 id \\u76F8\\u540C\\uFF0C\\u5BF9\\u5E94 Field \\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Field \\u7EC4\\u4EF6\\u4F1A\\u88AB\\u81EA\\u52A8\\u8FFD\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \"\\uFF0C\\u503C\\u4E0E\\u4E0A\\u8FF0 label \\u7684id \\u76F8\\u540C\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute\"\n  }, \"aria-required\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Field \\u914D\\u7F6E\\u4E86\\u5FC5\\u586B\\u65F6\\uFF08\\u5373 props.rules\\u4E2D\\u5305\\u542B require: true \\u6216 props.label\\u914D\\u7F6E\\u4E86required: true\\uFF09\\uFF0CField \\u7EC4\\u4EF6\\u4F1A\\u88AB\\u81EA\\u52A8\\u8FFD\\u52A0  aria-required = true\\uFF08Form.Switch\\u3001Form.CheckboxGroup \\u9664\\u5916\\uFF09\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute\"\n  }, \"aria-invalid\"), \" \\u3001\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage\"\n  }, \"aria-errormessage\"), \" \", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Field \\u6821\\u9A8C\\u672A\\u901A\\u8FC7\\u65F6\\uFF0CField \\u7EC4\\u4EF6\\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-invalid\"), \" = true \\u5C5E\\u6027\\uFF0CForm.CheckboxGroup \\u9664\\u5916\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Field \\u6821\\u9A8C\\u672A\\u901A\\u8FC7\\u65F6\\uFF0CField \\u7EC4\\u4EF6\\u4F1A\\u88AB\\u81EA\\u52A8\\u8FFD\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-errormessage\"), \" \\u5C5E\\u6027\\uFF0C\\u503C\\u4E3A errorMessage \\u6240\\u5BF9\\u5E94DOM\\u5143\\u7D20\\u7684 id \\uFF08\\u683C\\u5F0F: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-errormessage\"), \"\\uFF09\\uFF0CForm.CheckboxGroup \\u9664\\u5916\\u3002\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute\"\n  }, \"aria-describedby\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Field \\u914D\\u7F6E\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"helpText\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"extraText\"), \" \\u65F6\\uFF0CField \\u7EC4\\u4EF6\\u4F1A\\u88AB\\u81EA\\u52A8\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-describedby\"), \" \\u5C5E\\u6027\\uFF0C\\u503C\\u4E3A helpText\\u3001extraText \\u6240\\u5BF9\\u5E94DOM\\u5143\\u7D20\\u7684 id \\uFF08\\u683C\\u5F0F\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-helpText\"), \" \\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"${props.field}-extraText\"), \"\\uFF09\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u5355\\u6807\\u9898\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u5355\\u6807\\u9898\\u9700\\u8981\\u8DDF\\u968F\\u6807\\u9898\\u7684\\u4E66\\u5199\\u89C4\\u8303\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u5355\\u6807\\u7B7E\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6807\\u7B7E\\u662F\\u8F93\\u5165\\u6846\\u7684\\u7B80\\u77ED\\u63CF\\u8FF0\\u3002\\u6807\\u7B7E\\u4E0D\\u662F\\u6CE8\\u91CA\\u4FE1\\u606F\\uFF08help text\\uFF09\\uFF0C\\u56E0\\u6B64\\u4E0D\\u5E94\\u8BE5\\u662F\\u8F93\\u5165\\u6846\\u7684\\u586B\\u5199\\u8BF4\\u660E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6807\\u7B7E\\u5FC5\\u987B\\u8981\\uFF1A\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u653E\\u5728\\u8F93\\u5165\\u6846\\u7684\\u4E0A\\u65B9\\u6216\\u4E0B\\u65B9\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7B80\\u77ED\\uFF081-3\\u4E2A\\u8BCD\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u8BED\\u53E5\\u7684\\u5927\\u5C0F\\u5199\\u89C4\\u8303\\uFF08\\u9996\\u5B57\\u6BCD\\u5927\\u5199\\uFF0C\\u5176\\u4ED6\\u5C0F\\u5199\\uFF09\"))))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5E2E\\u52A9\\u6587\\u672C\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5E2E\\u52A9\\u6587\\u672C\\u4F7F\\u7528\\u8BED\\u53E5\\u4E66\\u5199\\u89C4\\u8303\\uFF0C\\u9996\\u5B57\\u6BCD\\u5927\\u5199\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8868\\u5355\\u6309\\u94AE\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5173\\u4E8E\\u8868\\u5355\\u6309\\u94AE\\u7684\\u6587\\u6848\\u89C4\\u8303\\uFF0C\\u53C2\\u8003\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/input/button#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83\"\n  }, \"\\u6309\\u94AEButton\\u7EC4\\u4EF6\\u7684\\u6587\\u6848\\u89C4\\u8303\"), \" \")))), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/formdemogood.jpg\",\n    style: {\n      height: 280\n    }\n  })), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/formdemobad.jpg\",\n    style: {\n      height: 280\n    }\n  })))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u6211\\u58F0\\u660E\\u4E86\\u8868\\u5355\\uFF0C\\u5BF9\\u503C\\u8FDB\\u884C\\u4E86\\u4FEE\\u6539\\uFF0C\\u6570\\u636E\\u6CA1\\u6709\\u81EA\\u52A8\\u6620\\u5C04\\u5230 formState.values \\u4E2D\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8BF7\\u68C0\\u67E5\\u662F\\u5426\\u6B63\\u786E\\u4F20\\u5165\\u4E86 field\\uFF0CField \\u4E0A\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"field\"), \"\\u5C5E\\u6027\\u662F\\u5FC5\\u586B\\u9879\\uFF01\\uFF01\\uFF01\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u4F20\\u5165\\u4E86 defaultValue\\u3001defaultChecked \\u4E0D\\u751F\\u6548\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u8BF7\\u53C2\\u8003\\u6587\\u6863\\u5F00\\u5934\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#%E5%A3%B0%E6%98%8E%E8%A1%A8%E5%8D%95%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%86%99%E6%B3%95\"\n  }, \"\\u8868\\u5355\\u63A7\\u4EF6\"), \"\\uFF0CForm.Field \\u7EC4\\u4EF6\\u5BF9\\u9ED8\\u8BA4\\u503C\\u505A\\u4E86\\u7EDF\\u4E00\\u5904\\u7406\\uFF0C\\u4F60\\u5E94\\u8BE5\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \"\\u6216\\u8005\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValues\"), \"\\u6765\\u4F20\\u5165\\u9ED8\\u8BA4\\u503C\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u5F02\\u6B65\\u66F4\\u65B0\\u4E86 initValue\\u3001initValues \\u540E\\uFF0C\\u7EC4\\u4EF6\\u6CA1\\u6709\\u53D1\\u751F\\u53D8\\u5316\\uFF0C\\u503C\\u6CA1\\u6709\\u751F\\u6548\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValues\"), \"\\u53EA\\u5728 Field\\u3001Form mounted \\u65F6\\u8FDB\\u884C\\u6D88\\u8D39\\uFF0C\\u540E\\u7EED\\u505A\\u7684\\u5F02\\u6B65\\u66F4\\u65B0\\u5E76\\u4E0D\\u4F1A\\u8D77\\u6548\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u679C\\u4F60\\u7684\\u521D\\u59CB\\u503C\\u9700\\u8981\\u4ECE\\u8FDC\\u7A0B\\u53D6\\uFF0C\\u90A3\\u4E48\\u4F60\\u53EF\\u4EE5\\u5728\\u83B7\\u53D6\\u5230\\u503C\\u4E4B\\u540E\\uFF0C\\u4F7F\\u7528\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.setValue/setValues\"), \"\\u8FDB\\u884C\\u66F4\\u65B0\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u6216\\u8005\\u76F4\\u63A5\\u7ED9 Form\\u3001Field \\u4F20\\u5165\\u4E00\\u4E2A\\u65B0\\u7684\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"key\"), \"\\u5F3A\\u5236\\u5B83\\u91CD\\u65B0\\u6302\\u8F7D\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u8C03\\u7528\\u4E86 formApi.setValues \\u66F4\\u65B0 fields \\u7684\\u503C\\uFF0C\\u4F46\\u662F\\u5B9E\\u9645\\u6E32\\u67D3\\u5E76\\u6CA1\\u6709\\u66F4\\u65B0\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"setValues \\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\u5BF9\\u5C1A\\u672A\\u5B58\\u5728\\u7684 field \\u8FDB\\u884C\\u8D4B\\u503C\\u4E0D\\u4F1A\\u751F\\u6548\\u3002\\u5982\\u679C\\u4F60\\u7684 fields \\u662F\\u52A8\\u6001\\u52A0\\u8F7D\\u7684\\u8BDD\\uFF0C\\u8BF7\\u68C0\\u67E5\\u5728 setValues \\u65F6\\uFF0C\\u8BE5 field \\u662F\\u5426\\u5DF2 mounted\\u3002\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u6709\\u9700\\u8981\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 override \\u6A21\\u5F0F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"formApi.setValues(newValue, { isOverride: true })\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48 rules \\u4E2D\\u7684 validator \\u6821\\u9A8C\\u5931\\u8D25\\uFF0C\\u4F46\\u662F\\u5BF9\\u5E94\\u7684\\u9519\\u8BEF\\u4FE1\\u606F\\u6CA1\\u6709\\u88AB\\u5C55\\u793A\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"async-validator \\u7684\\u81EA\\u5B9A\\u4E49 validator \\u8FD4\\u56DE\\u503C\\u5FC5\\u987B\\u662F boolean \\u7C7B\\u578B\\uFF0C\\u5426\\u5219\\u5B83\\u4E0D\\u6267\\u884C\\u4EFB\\u4F55\\u56DE\\u8C03\\uFF0Csemi \\u540E\\u7EED\\u7684\\u94A9\\u5B50\\u4E5F\\u4E0D\\u4F1A\\u88AB\\u8C03\\u7528\\u3002\\u5EFA\\u8BAE\\u901A\\u8FC7\\u52A0 !! \\u6216\\u8005 Boolean() \\u5F3A\\u5236\\u8F6C\\u6362\\u8FD4\\u56DE\\u7C7B\\u578B\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48 getValues \\u62FF\\u4E0D\\u5230\\u67D0\\u4E2A field\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"field \\u6CA1\\u6709\\u521D\\u59CB\\u503C\\u7684\\u8BDD\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getValues\"), \" \\u83B7\\u53D6\\u4E0D\\u5230\\u8FD9\\u4E00\\u9879\\u3002\\u53EF\\u4EE5\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValues\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"initValue\"), \" \\u6216\\u8005\\u7ED9 form \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allowEmpty\"), \" \\u5C5E\\u6027\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u5728\\u8F93\\u5165\\u6846\\uFF08Input\\u3001TagInput\\u2026\\u2026\\uFF09\\u4E0A\\u6572\\u51FB enter \\u56DE\\u8F66\\u952E\\u4F1A\\u89E6\\u53D1\\u4E86 Form \\u7684 submit\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u8FD9\\u4E2A\\u662F\\u6807\\u51C6 HTML \\u884C\\u4E3A\\uFF0C\\u6211\\u4EEC\\u4E0D\\u8BA1\\u5212\\u8FDB\\u884C\\u5E72\\u9884\\uFF0C\\u4F1A\\u4E0E\\u539F\\u751F\\u4FDD\\u6301\\u4E00\\u81F4\\u3002\\u5982\\u679C\\u8868\\u5355\\u5185\\u786E\\u5B9E\\u53EA\\u6709\\u4E00\\u4E2A Input \\u5143\\u7D20\\uFF0C\\u53C8\\u4E0D\\u60F3\\u56DE\\u8F66\\u65F6\\u89E6\\u53D1 submit \\u56DE\\u8C03\\uFF0C\\u5EFA\\u8BAE\\u5BF9 Input \\u7684 keydown \\u4E8B\\u4EF6\\u7684 enter \\u91C7\\u53D6 preventDefault \\u963B\\u6B62\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u70B9\\u51FB \", mdx(\"a\", {\n    href: \"https://github.com/DouyinFE/semi-design/issues/767\",\n    target: \"_blank\"\n  }, \"#767\"), \" \\u67E5\\u770B\\u76F8\\u5173\\u80CC\\u666F\\u548C\\u5185\\u5BB9\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u8868\\u5355\\u4F1A\\u81EA\\u52A8\\u4FDD\\u5B58\\u5386\\u53F2\\u8F93\\u5165\\u9879\\uFF0C\\u4E0D\\u60F3\\u8981\\u8FD9\\u4E2A\\u529F\\u80FD\\u600E\\u4E48\\u529E\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5728 v2.3 \\u4E4B\\u524D\\uFF0CForm \\u5E76\\u6CA1\\u6709\\u4E25\\u683C\\u6309\\u7167 A11y \\u65E0\\u969C\\u788D\\u6807\\u51C6\\u4E3A\\u8F93\\u5165\\u63A7\\u4EF6\\u914D\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"for\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"name\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" \\u7B49\\u5C5E\\u6027\\uFF0C\\u56E0\\u6B64\\u5728\\u4E4B\\u524D\\u7684\\u7248\\u672C\\u5E76\\u6CA1\\u6709\\u8BE5\\u529F\\u80FD\\u3002v2.3 \\u540E\\u6211\\u4EEC\\u4E25\\u683C\\u6309\\u7167 W3C \\u6807\\u51C6\\u8FDB\\u884C\\u4E86\\u5B9E\\u73B0\\u3002\\u5982\\u679C\\u4F60\\u4E0D\\u5E0C\\u671B\\u6D4F\\u89C8\\u5668\\u81EA\\u52A8\\u4FDD\\u5B58\\u5386\\u53F2\\u8F93\\u5165\\u9879\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7\\u5728 Form \\u7EA7\\u522B\\u6216\\u8005 Field \\u7EA7\\u522B\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"autoComplete=off\"), \" \\u5173\\u6389\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://bytedance.feishu.cn/docs/doccnNKaGhZMqyu0FufD1JGHOjf\"\n  }, \"\\uD83D\\uDD0D \\uD83E\\uDDFE \\u66F4\\u591AForm FAQ\\u8865\\u5145 & \\u95EE\\u9898\\u81EA\\u67E5\\u624B\\u518C\")), \" \")))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/form","next":{"fields":{"slug":"en-US/input/input"},"id":"8c99473f-2ceb-54f7-9b49-f7ce350ff45b","frontmatter":{"title":"Input","localeCode":"en-US","icon":"doc-input","showNew":null}},"previous":{"fields":{"slug":"en-US/input/form"},"id":"3f01603d-3934-54ae-8fb7-765c477236a6","frontmatter":{"title":"Form","localeCode":"en-US","icon":"doc-form","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}