{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/input/pincode","result":{"data":{"current":{"frontmatter":{"title":"PinCode 验证码输入","order":43,"brief":"用于便捷直观地输入验证码","icon":"doc-pincode"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本使用","title":"基本使用"},{"url":"#受控","title":"受控"},{"url":"#限制验证码格式","title":"限制验证码格式","items":[{"url":"#设置位数","title":"设置位数"},{"url":"#设置字符范围","title":"设置字符范围"}]},{"url":"#手动聚焦失焦","title":"手动聚焦失焦"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#methods","title":"Methods"}]},"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\": 43,\n  \"category\": \"输入类\",\n  \"title\": \"PinCode 验证码输入\",\n  \"icon\": \"doc-pincode\",\n  \"width\": \"60%\",\n  \"brief\": \"用于便捷直观地输入验证码\"\n};\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  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"PinCode \\u4ECE 2.62.0 \\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { PinCode } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import { PinCode } from '@douyinfe/semi-ui';\\nimport React from 'react';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <PinCode\\n                size={'small'}\\n                defaultValue={'123456'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n            <br />\\n            <PinCode\\n                size={'default'}\\n                defaultValue={'123456'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n            <br />\\n            <PinCode\\n                size={'large'}\\n                defaultValue={'123456'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 value \\u4F20\\u5165\\u9A8C\\u8BC1\\u7801\\u5B57\\u7B26\\u4E32\\uFF0C\\u914D\\u5408 onChange \\u53D7\\u63A7\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { PinCode, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState('69af41');\\n    return (\\n        <>\\n            <Button onClick={() => setValue(String(parseInt(Math.random() * 100000000)).slice(0, 6))}>\\n                Set Random Value\\n            </Button>\\n            <br />\\n            <br />\\n            <PinCode\\n                format={'mixed'}\\n                onComplete={value => console.log('pincode: ', value)}\\n                value={value}\\n                onChange={v => {\\n                    console.log(v);\\n                    setValue(v);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9650\\u5236\\u9A8C\\u8BC1\\u7801\\u683C\\u5F0F\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u4F4D\\u6570\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 count \\u8BBE\\u7F6E\\u4F4D\\u6570\\uFF0C\\u9ED8\\u8BA4 6 \\u4F4D\\uFF0C\\u4E0B\\u65B9 Demo \\u8BBE\\u7F6E\\u4E3A 4 \\u4F4D\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { PinCode } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <PinCode\\n                size={'large'}\\n                defaultValue={'6688'}\\n                count={4}\\n                onComplete={value => console.log('pincode: ', value)}\\n                onChange={value => {\\n                    console.log(value);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u5B57\\u7B26\\u8303\\u56F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 format \\u63A7\\u5236\\u53EF\\u8F93\\u5165\\u7684\\u5B57\\u7B26\\u8303\\u56F4\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u5165 \\\"number\\\" \\u53EA\\u5141\\u8BB8\\u8BBE\\u7F6E\\u6570\\u5B57\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u5165 \\u201Cmixed\\u201D \\u5141\\u8BB8\\u6570\\u5B57\\u548C\\u5B57\\u6BCD\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u5165\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\uFF0C\\u53EA\\u5141\\u8BB8\\u8F93\\u5165\\u53EF\\u901A\\u8FC7\\u6B63\\u5219\\u5224\\u5B9A\\u7684\\u5B57\\u7B26\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u5165\\u51FD\\u6570\\uFF0C\\u9A8C\\u8BC1\\u7801\\u4F1A\\u5728\\u8F93\\u5165\\u7684\\u65F6\\u5019\\u4EE5\\u5B57\\u7B26\\u4E3A\\u5355\\u4F4D\\u88AB\\u4F9D\\u6B21\\u4F5C\\u4E3A\\u53C2\\u6570\\u5206\\u522B\\u5355\\u72EC\\u4F20\\u5165\\u8FDB\\u884C\\u6821\\u9A8C\\uFF0C\\u5F53\\u51FD\\u6570\\u8FD4\\u56DE true \\u65F6\\uFF0C\\u5141\\u8BB8\\u8BE5\\u5B57\\u7B26\\u88AB\\u8F93\\u5165\\u8FDB PinCode\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { PinCode, Button, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    return (\\n        <>\\n            <Typography.Text>\\u7EAF\\u6570\\u5B57</Typography.Text>\\n            <PinCode format={'number'} onComplete={value => console.log('pincode: ', value)} />\\n            <br />\\n            <Typography.Text>\\u5B57\\u6BCD\\u548C\\u6570\\u5B57</Typography.Text>\\n            <PinCode format={'mixed'} onComplete={value => console.log('pincode: ', value)} />\\n            <br />\\n            <Typography.Text>\\u53EA\\u5927\\u5199\\u5B57\\u6BCD</Typography.Text>\\n            <PinCode format={/[A-Z]/} onComplete={value => console.log('pincode: ', value)} />\\n            <br />\\n            <Typography.Text>\\u53EA\\u5C0F\\u5199\\u5B57\\u6BCD(\\u51FD\\u6570\\u5224\\u65AD)</Typography.Text>\\n            <PinCode\\n                format={char => {\\n                    return /[a-z]/.test(char);\\n                }}\\n                onComplete={value => console.log('pincode: ', value)}\\n            />\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u624B\\u52A8\\u805A\\u7126\\u5931\\u7126\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 Ref \\u4E0A\\u65B9\\u6CD5 focus \\u4E0E blur\\uFF0C\\u5165\\u53C2\\u4E3A\\u5BF9\\u5E94 Input \\u7684\\u5E8F\\u53F7\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { PinCode, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n    const [value, setValue] = useState('69af41');\\n    const ref = useRef();\\n    return (\\n        <>\\n            <Button onClick={() => ref.current.focus(2)}>Focus Third Input</Button>\\n            <br />\\n            <br />\\n            <PinCode\\n                format={'mixed'}\\n                ref={ref}\\n                onComplete={value => console.log('pincode: ', value)}\\n                value={value}\\n                onChange={v => {\\n                    console.log(v);\\n                    setValue(v);\\n                }}\\n            />\\n        </>\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), 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  }, \"autoFocus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u805A\\u7126\\u5230\\u7B2C\\u4E00\\u4E2A\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), 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  }, \"\\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  }, \"count\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9A8C\\u8BC1\\u7801\\u4F4D\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultValue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5185\\u5BB9\\u9ED8\\u8BA4\\u503C\"), 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  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\"), 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  }, \"format\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9A8C\\u8BC1\\u7801\\u5355\\u4E2A\\u5B57\\u7B26\\u683C\\u5F0F\\u9650\\u5236\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'number'\", \"|\", \" 'mixed\\u2018 \", \"|\", \" RegExp \", \"|\", \" (char:string)=>boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'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  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5927\\u5C0F\\uFF0Clarge\\u3001default\\u3001small\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\"), 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  }, \"\\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  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u6846\\u5185\\u5BB9\"), 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  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8F93\\u5165\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value:string)=>void\"), 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  }, \"onComplete\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9A8C\\u8BC1\\u7801\\u6240\\u6709\\u4F4D\\u6570\\u8F93\\u5165\\u5B8C\\u6BD5\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: string) => void\"), 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  }, \"Methods\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7ED1\\u5B9A\\u5728\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4E0A\\u7684\\u65B9\\u6CD5\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u8C03\\u7528\\u5B9E\\u73B0\\u67D0\\u4E9B\\u7279\\u6B8A\\u4EA4\\u4E92\"), 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(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"focus\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u805A\\u7126\\uFF0C\\u5165\\u53C2\\u4E3A\\u9A8C\\u8BC1\\u7801\\u7B2C\\u51E0\\u4F4D\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"blur\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u79FB\\u51FA\\u7126\\u70B9\\uFF0C\\u5165\\u53C2\\u4E3A\\u9A8C\\u8BC1\\u7801\\u7B2C\\u51E0\\u4F4D\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/input/pincode","next":{"fields":{"slug":"en-US/input/radio"},"id":"4ff43290-1f50-51d1-a0bd-6d100e1f896d","frontmatter":{"title":"Radio","localeCode":"en-US","icon":"doc-radio","showNew":null}},"previous":{"fields":{"slug":"en-US/input/pincode"},"id":"867ea23b-afba-5b8e-9a84-c24acc70a344","frontmatter":{"title":"PinCode","localeCode":"en-US","icon":"doc-pincode","showNew":null}}}},"staticQueryHashes":["1348983216308087","1477422646308087","3245198693308087","417590761308087","63159454308087"]}