@uiw/doc
Version:
UIW documentation website.
1 lines • 101 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9721],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,n)=>{"use strict";n.d(t,{Z:()=>_});var r=n(8573),o=n(6320),u=n(8563),i=n(7622),l=n(7937);const a={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var s=n(4760);function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,s.jsxs)("div",{className:a.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,s.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,s.jsx)("br",{}),(0,s.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,s.jsx)(l.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=o.ZP.Preview,p=o.ZP.Code,b=o.ZP.Toolbar,d=e=>{var t,n;let{node:i,components:l,data:a,...c}=e;const d=(0,r.useRef)(null),{headings:_,headingsList:m,...y}=c;(0,r.useEffect)((()=>{if(d.current){const e=d.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(d.current,e)}}),[d]);const h=null===i||void 0===i||null===(t=i.position)||void 0===t?void 0:t.start.line,E=null===i||void 0===i||null===(n=i.data)||void 0===n?void 0:n.meta,v=(0,u.Mx)(E)||String(h),C=l["".concat(v)];if(v&&"function"===typeof C){const e=a[v].value||"",t=(0,u.aE)(E||"");return(0,s.jsxs)(o.ZP,{ref:d,children:[(0,s.jsx)(f,{style:{background:t.bg||"transparent"},children:(0,s.jsx)(C,{})}),(0,s.jsx)(b,{text:e,children:t.title||"Example"}),(0,s.jsx)(p,{children:(0,s.jsx)("pre",{...y})})]})}return(0,s.jsx)("code",{...y})};function _(e){return(0,s.jsxs)(r.Fragment,{children:[(0,s.jsx)(i.Z,{className:a.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,s.jsx)(d,{...e,...t})}}),(0,s.jsx)(c,{path:e.path})]})}},4426:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});const r={components:{19:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return u(this,f),(e=c.call(this)).state={visible:!1},e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",isOpen:this.state.visible,confirmText:"\u786e\u5b9a\u6309\u94ae",cancelText:"\u53d6\u6d88\u6309\u94ae",icon:"information",type:"primary",onConfirm:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01")},onCancel:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01")},onClosed:this.onClosed.bind(this)},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),r.default.createElement("br",null),r.default.createElement("br",null),"React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 ",r.default.createElement("a",{href:"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA",target:"_blank"},"Babel REPL")," \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002"),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u786e\u8ba4\u5bf9\u8bdd\u6846")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),80:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return u(this,f),(e=c.call(this)).state={visible:!1},e.time=null,e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){var e=this;return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",isOpen:this.state.visible,confirmText:"\u786e\u5b9a\u6309\u94ae",cancelText:"\u53d6\u6d88\u6309\u94ae",type:"danger",onCancel:function(){clearTimeout(e.time),console.log("\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01")},onClosed:this.onClosed.bind(this),onConfirm:function(){return console.log("\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3"),new Promise((function(t,n){var r=Math.random();console.log("\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef",r,r>.5),e.time=setTimeout(r>.5?t:n,3e3)})).catch((function(){}))}},"\u8fd9\u662f\u4e00\u4e2a\u5355\u51fb \u201c",r.default.createElement("b",null,"\u786e\u5b9a\u6309\u94ae"),"\u201d \u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846\u7684\u5b9e\u4f8b\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u89e6\u53d1 \u201c",r.default.createElement("b",null,"onConfirm"),"\u201d \u6216 \u201c",r.default.createElement("b",null,"onCancel"),"\u201d \u4e8b\u4ef6\u3002",r.default.createElement("br",null),r.default.createElement("br",null)," \u8fd9\u91cc\u662f\u5229\u7528 ",r.default.createElement("b",null,"Promise")," \u7684\u7279\u6027\uff0c\u7b49\u5b83\u6267\u884c\u5b8c\u6210\u540e\uff0c\u518d\u53bb\u5173\u95ed\u7a97\u53e3\uff0c\u8fbe\u5230\u5ef6\u8fdf\u5173\u95ed\u7684\u6548\u679c\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u8fd9\u4e2a\u6d4b\u8bd5\u4f8b\u5b50\uff0c\u751f\u6210\u968f\u673a\u503c\u5224\u65ad\u662f\u5426\u5927\u4e8e ",r.default.createElement("b",null,"0.5")," \u6267\u884c ",r.default.createElement("b",null,"resolve")," \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c ",r.default.createElement("b",null,"reject")," \u89e6\u53d1 ",r.default.createElement("b",null,"catch")," \u9519\u8bef\u3002"),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u5ef6\u8fdf\u5173\u95ed\u5bf9\u8bdd\u6846")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),142:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e,t,n){return(t=s(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,s(r.key),r)}}function s(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function f(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=p(t);if(n){var u=p(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}var b=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&c(e,t)}(b,e);var t,n,s,p=f(b);function b(){var e;return l(this,b),(e=p.call(this)).state={visible:!1,loading:!1},e}return t=b,n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"onSubmit",value:function(e){var t=this,n=(e.initial,e.current),r={};if(n.userName.startsWith("u")&&(r.userName="\u59d3\u540d ".concat(n.userName," \u4e0d\u80fd\u4ee5 \u2018u\u2019 \u5f00\u5934")),(!n.age||n.age<18||n.age>30)&&(r.age="\u5e74\u9f84\u5fc5\u987b\u572818 ~ 30\u5c81\u4e4b\u95f4\u3002"),n.textarea||(r.textarea="\u8bf7\u8f93\u5165\u63cf\u8ff0\u5185\u5bb9"),Object.keys(r).length>0){var u=new Error;throw u.filed=r,u}this.setState({loading:!0}),setTimeout((function(){t.setState({loading:!1,visible:!1}),o.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\u901a\u77e5\uff01",description:"\u63d0\u4ea4\u5185\u5bb9\uff0c\u3002"})}),2e3)}},{key:"render",value:function(){var e=this;return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",width:900,isOpen:this.state.visible,onClosed:this.onClosed.bind(this),type:"danger",useButton:!1},r.default.createElement(o.Form,{resetOnSubmit:!1,onSubmit:this.onSubmit.bind(this),onSubmitError:function(e){return e.filed?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e.filed):null},fields:{userName:{initialValue:"uiw",label:"\u59d3\u540d",help:"\u4ee5\u201cu\u201d\u5f00\u5934\u7684\u540d\u5b57\u5c06\u5728\u6b64\u5904\u663e\u793a\u9519\u8bef\u4fe1\u606f",children:r.default.createElement(o.Input,{type:"text"})},age:{initialValue:9,label:"\u5e74\u9f84",children:r.default.createElement(o.Input,{type:"number"})},textarea:{initialValue:"",label:"\u63cf\u8ff0\u8bf4\u660e",children:r.default.createElement(o.Textarea,{placeholder:"\u8bf7\u8f93\u5165\u5185\u5bb9"})}}},(function(t){var n=t.fields,u=t.state,i=t.canSubmit;return console.log("fields:--\x3e",u),r.default.createElement("div",null,r.default.createElement(o.Row,{gutter:10},r.default.createElement(o.Col,null,n.userName),r.default.createElement(o.Col,null,n.age)),r.default.createElement(o.Row,{gutter:10},r.default.createElement(o.Col,null,n.textarea)),r.default.createElement(o.Row,{gutter:10,justify:"flex-end"},r.default.createElement(o.Col,{fixed:!0},r.default.createElement(o.Button,{loading:e.state.loading,disabled:!i(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4\u8868\u5355"))))}))),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u8868\u5355\u4e2d\u5e94\u7528")))}}],n&&a(t.prototype,n),s&&a(t,s),Object.defineProperty(t,"prototype",{writable:!1}),b}(r.default.Component);return b}(),258:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}return function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){var e;return u(this,f),(e=c.call(this)).state={visible:!1},e}return t=f,(n=[{key:"onClick",value:function(){this.setState({visible:!this.state.visible})}},{key:"onClosed",value:function(){this.setState({visible:!1})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Modal,{title:"\u6a21\u6001\u5bf9\u8bdd\u6846",isOpen:this.state.visible,useButton:!1,confirmText:"\u786e\u5b9a\u6309\u94ae",cancelText:"\u53d6\u6d88\u6309\u94ae",icon:"information",type:"danger",onConfirm:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01")},onCancel:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01")},onClosed:this.onClosed.bind(this)},"React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002",r.default.createElement("br",null),r.default.createElement("br",null),r.default.createElement("b",null,"\u7ec4\u4ef6"),r.default.createElement("br",null),r.default.createElement("br",null),"React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002",r.default.createElement("br",null),r.default.createElement("br",null),"\u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 Babel REPL \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002",r.default.createElement("div",{className:"w-modal-footer"},r.default.createElement(o.Button,{type:"danger",onClick:this.onClosed.bind(this)},"\u786e\u5b9a\u6309\u94ae"),r.default.createElement(o.Button,{onClick:this.onClosed.bind(this)},"\u53d6\u6d88\u6309\u94ae"))),r.default.createElement(o.ButtonGroup,null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u786e\u8ba4\u5bf9\u8bdd\u6846")))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component)}(),324:function(){function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,l(r.key),r)}}function l(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function a(e,t){return a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},a(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=c(t);if(n){var u=c(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}var f=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&a(e,t)}(f,e);var t,n,l,c=s(f);function f(){return u(this,f),c.apply(this,arguments)}return t=f,(n=[{key:"onClick",value:function(){o.Modal.show({confirmText:"\u77e5\u9053\u4e86",children:"\u5feb\u6377\u63d0\u793a",onConfirm:function(){return console.log("\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01")}})}},{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Button,{onClick:this.onClick.bind(this)},"\u786e\u8ba4\u5bf9\u8bdd\u6846"))}}])&&i(t.prototype,n),l&&i(t,l),Object.defineProperty(t,"prototype",{writable:!1}),f}(r.default.Component);return f}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this);\n _this.state = {\n visible: false\n };\n return _this;\n }\n _createClass(Demo, [{\n key: "onClick",\n value: function onClick() {\n this.setState({\n visible: !this.state.visible\n });\n }\n }, {\n key: "onClosed",\n value: function onClosed() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: "render",\n value: function render() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Modal, {\n title: "\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846",\n isOpen: this.state.visible,\n confirmText: "\\u786E\\u5B9A\\u6309\\u94AE",\n cancelText: "\\u53D6\\u6D88\\u6309\\u94AE",\n icon: "information",\n type: "primary",\n onConfirm: function onConfirm() {\n return console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\');\n },\n onCancel: function onCancel() {\n return console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\');\n },\n onClosed: this.onClosed.bind(this)\n }, "React \\u53EF\\u4EE5\\u975E\\u5E38\\u8F7B\\u677E\\u5730\\u521B\\u5EFA\\u7528\\u6237\\u4EA4\\u4E92\\u754C\\u9762\\u3002\\u4E3A\\u4F60\\u5E94\\u7528\\u7684\\u6BCF\\u4E00\\u4E2A\\u72B6\\u6001\\u8BBE\\u8BA1\\u7B80\\u6D01\\u7684\\u89C6\\u56FE\\uFF0C\\u5728\\u6570\\u636E\\u6539\\u53D8\\u65F6 React \\u4E5F\\u53EF\\u4EE5\\u9AD8\\u6548\\u5730\\u66F4\\u65B0\\u6E32\\u67D3\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4EE5\\u58F0\\u660E\\u5F0F\\u7F16\\u5199UI\\uFF0C\\u53EF\\u4EE5\\u8BA9\\u4F60\\u7684\\u4EE3\\u7801\\u66F4\\u52A0\\u53EF\\u9760\\uFF0C\\u4E14\\u65B9\\u4FBF\\u8C03\\u8BD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u521B\\u5EFA\\u597D\\u62E5\\u6709\\u5404\\u81EA\\u72B6\\u6001\\u7684\\u7EC4\\u4EF6\\uFF0C\\u518D\\u7531\\u7EC4\\u4EF6\\u6784\\u6210\\u66F4\\u52A0\\u590D\\u6742\\u7684\\u754C\\u9762\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u9700\\u518D\\u7528\\u6A21\\u7248\\u4EE3\\u7801\\uFF0C\\u901A\\u8FC7\\u4F7F\\u7528JavaScript\\u7F16\\u5199\\u7684\\u7EC4\\u4EF6\\u4F60\\u53EF\\u4EE5\\u66F4\\u597D\\u5730\\u4F20\\u9012\\u6570\\u636E\\uFF0C\\u5C06\\u5E94\\u7528\\u72B6\\u6001\\u548CDOM\\u62C6\\u5206\\u5F00\\u6765\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u65E0\\u8BBA\\u4F60\\u73B0\\u5728\\u6B63\\u5728\\u4F7F\\u7528\\u4EC0\\u4E48\\u6280\\u672F\\u6808\\uFF0C\\u4F60\\u90FD\\u53EF\\u4EE5\\u968F\\u65F6\\u5F15\\u5165 React \\u5F00\\u53D1\\u65B0\\u7279\\u6027\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("b", null, "\\u7EC4\\u4EF6"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "React \\u7EC4\\u4EF6\\u4F7F\\u7528\\u4E00\\u4E2A\\u540D\\u4E3A render() \\u7684\\u65B9\\u6CD5\\uFF0C \\u63A5\\u6536\\u6570\\u636E\\u4F5C\\u4E3A\\u8F93\\u5165\\uFF0C\\u8F93\\u51FA\\u9875\\u9762\\u4E2D\\u5BF9\\u5E94\\u5C55\\u793A\\u7684\\u5185\\u5BB9\\u3002 \\u4E0B\\u9762\\u8FD9\\u4E2A\\u793A\\u4F8B\\u4E2D\\u7C7B\\u4F3CXML\\u7684\\u5199\\u6CD5\\u88AB\\u79F0\\u4E3AJSX. \\u8F93\\u5165\\u7684\\u6570\\u636E\\u901A\\u8FC7 this.props \\u4F20\\u5165 render() \\u65B9\\u6CD5\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u4F7F\\u7528 React \\u7684\\u65F6\\u5019\\u4E5F\\u53EF\\u4EE5\\u4E0D\\u4F7F\\u7528 JSX \\u8BED\\u6CD5 \\u4F60\\u53EF\\u4EE5\\u5728 ", /*#__PURE__*/_react["default"].createElement("a", {\n href: "https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA",\n target: "_blank"\n }, "Babel REPL"), " \\u67E5\\u770B JSX \\u662F\\u5982\\u4F55\\u88AB\\u6E32\\u67D3\\u6210\\u539F\\u751F JavaScript \\u4EE3\\u7801\\u7684\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this)\n }, "\\u786E\\u8BA4\\u5BF9\\u8BDD\\u6846")));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Modal, ButtonGroup, Button } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n }\n }\n onClick() {\n this.setState({ visible: !this.state.visible });\n }\n onClosed() {\n this.setState({ visible: false });\n }\n render() {\n return (\n <div>\n <Modal\n title="\u6a21\u6001\u5bf9\u8bdd\u6846"\n isOpen={this.state.visible}\n confirmText="\u786e\u5b9a\u6309\u94ae"\n cancelText="\u53d6\u6d88\u6309\u94ae"\n icon="information"\n type="primary"\n onConfirm={() => console.log(\'\u60a8\u70b9\u51fb\u4e86\u786e\u5b9a\u6309\u94ae\uff01\')}\n onCancel={() => console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\')}\n onClosed={this.onClosed.bind(this)}\n >\n React \u53ef\u4ee5\u975e\u5e38\u8f7b\u677e\u5730\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u754c\u9762\u3002\u4e3a\u4f60\u5e94\u7528\u7684\u6bcf\u4e00\u4e2a\u72b6\u6001\u8bbe\u8ba1\u7b80\u6d01\u7684\u89c6\u56fe\uff0c\u5728\u6570\u636e\u6539\u53d8\u65f6 React \u4e5f\u53ef\u4ee5\u9ad8\u6548\u5730\u66f4\u65b0\u6e32\u67d3\u754c\u9762\u3002\n <br /><br />\n \u4ee5\u58f0\u660e\u5f0f\u7f16\u5199UI\uff0c\u53ef\u4ee5\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u52a0\u53ef\u9760\uff0c\u4e14\u65b9\u4fbf\u8c03\u8bd5\u3002\n <br /><br />\n \u521b\u5efa\u597d\u62e5\u6709\u5404\u81ea\u72b6\u6001\u7684\u7ec4\u4ef6\uff0c\u518d\u7531\u7ec4\u4ef6\u6784\u6210\u66f4\u52a0\u590d\u6742\u7684\u754c\u9762\u3002\n <br /><br />\n \u65e0\u9700\u518d\u7528\u6a21\u7248\u4ee3\u7801\uff0c\u901a\u8fc7\u4f7f\u7528JavaScript\u7f16\u5199\u7684\u7ec4\u4ef6\u4f60\u53ef\u4ee5\u66f4\u597d\u5730\u4f20\u9012\u6570\u636e\uff0c\u5c06\u5e94\u7528\u72b6\u6001\u548cDOM\u62c6\u5206\u5f00\u6765\u3002\n <br /><br />\n \u65e0\u8bba\u4f60\u73b0\u5728\u6b63\u5728\u4f7f\u7528\u4ec0\u4e48\u6280\u672f\u6808\uff0c\u4f60\u90fd\u53ef\u4ee5\u968f\u65f6\u5f15\u5165 React \u5f00\u53d1\u65b0\u7279\u6027\u3002\n <br /><br />\n <b>\u7ec4\u4ef6</b>\n <br /><br />\n React \u7ec4\u4ef6\u4f7f\u7528\u4e00\u4e2a\u540d\u4e3a render() \u7684\u65b9\u6cd5\uff0c \u63a5\u6536\u6570\u636e\u4f5c\u4e3a\u8f93\u5165\uff0c\u8f93\u51fa\u9875\u9762\u4e2d\u5bf9\u5e94\u5c55\u793a\u7684\u5185\u5bb9\u3002 \u4e0b\u9762\u8fd9\u4e2a\u793a\u4f8b\u4e2d\u7c7b\u4f3cXML\u7684\u5199\u6cd5\u88ab\u79f0\u4e3aJSX. \u8f93\u5165\u7684\u6570\u636e\u901a\u8fc7 this.props \u4f20\u5165 render() \u65b9\u6cd5\u3002\n <br /><br />\n \u4f7f\u7528 React \u7684\u65f6\u5019\u4e5f\u53ef\u4ee5\u4e0d\u4f7f\u7528 JSX \u8bed\u6cd5 \u4f60\u53ef\u4ee5\u5728 <a href="https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUPGDADkdECChWeASl4AlOMOBQAIgHkAssp0aIySpogoaFBUQmISdC48QA" target="_blank">Babel REPL</a> \u67e5\u770b JSX \u662f\u5982\u4f55\u88ab\u6e32\u67d3\u6210\u539f\u751f JavaScript \u4ee3\u7801\u7684\u3002\n </Modal>\n <ButtonGroup>\n <Button onClick={this.onClick.bind(this)}>\u786e\u8ba4\u5bf9\u8bdd\u6846</Button>\n </ButtonGroup>\n </div>\n )\n }\n}\nexport default Demo;'},80:{name:80,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n var _this;\n _classCallCheck(this, Demo);\n _this = _super.call(this);\n _this.state = {\n visible: false\n };\n _this.time = null;\n return _this;\n }\n _createClass(Demo, [{\n key: "onClick",\n value: function onClick() {\n this.setState({\n visible: !this.state.visible\n });\n }\n }, {\n key: "onClosed",\n value: function onClosed() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: "render",\n value: function render() {\n var _this2 = this;\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Modal, {\n title: "\\u6A21\\u6001\\u5BF9\\u8BDD\\u6846",\n isOpen: this.state.visible,\n confirmText: "\\u786E\\u5B9A\\u6309\\u94AE",\n cancelText: "\\u53D6\\u6D88\\u6309\\u94AE",\n type: "danger",\n onCancel: function onCancel() {\n clearTimeout(_this2.time);\n console.log(\'\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01\');\n },\n onClosed: this.onClosed.bind(this),\n onConfirm: function onConfirm() {\n console.log(\'\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3\');\n return new Promise(function (resolve, reject) {\n var random = Math.random();\n console.log(\'\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef\', random, random > 0.5);\n _this2.time = setTimeout(random > 0.5 ? resolve : reject, 3000);\n })["catch"](function () {\n // \u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u65b9\u5f0f\uff0c\u963b\u6b62\u5f39\u6846\u6d88\u5931\n // throw new Error();\n });\n }\n }, "\\u8FD9\\u662F\\u4E00\\u4E2A\\u5355\\u51FB \\u201C", /*#__PURE__*/_react["default"].createElement("b", null, "\\u786E\\u5B9A\\u6309\\u94AE"), "\\u201D \\u5EF6\\u8FDF\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846\\u7684\\u5B9E\\u4F8B\\uFF0C\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846\\u89E6\\u53D1 \\u201C", /*#__PURE__*/_react["default"].createElement("b", null, "onConfirm"), "\\u201D \\u6216 \\u201C", /*#__PURE__*/_react["default"].createElement("b", null, "onCancel"), "\\u201D \\u4E8B\\u4EF6\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), " \\u8FD9\\u91CC\\u662F\\u5229\\u7528 ", /*#__PURE__*/_react["default"].createElement("b", null, "Promise"), " \\u7684\\u7279\\u6027\\uFF0C\\u7B49\\u5B83\\u6267\\u884C\\u5B8C\\u6210\\u540E\\uFF0C\\u518D\\u53BB\\u5173\\u95ED\\u7A97\\u53E3\\uFF0C\\u8FBE\\u5230\\u5EF6\\u8FDF\\u5173\\u95ED\\u7684\\u6548\\u679C\\u3002", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "\\u8FD9\\u4E2A\\u6D4B\\u8BD5\\u4F8B\\u5B50\\uFF0C\\u751F\\u6210\\u968F\\u673A\\u503C\\u5224\\u65AD\\u662F\\u5426\\u5927\\u4E8E ", /*#__PURE__*/_react["default"].createElement("b", null, "0.5"), " \\u6267\\u884C ", /*#__PURE__*/_react["default"].createElement("b", null, "resolve"), " \\u4E8B\\u4EF6\\uFF0C\\u5426\\u5219 \\u6267\\u884C ", /*#__PURE__*/_react["default"].createElement("b", null, "reject"), " \\u89E6\\u53D1 ", /*#__PURE__*/_react["default"].createElement("b", null, "catch"), " \\u9519\\u8BEF\\u3002"), /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n onClick: this.onClick.bind(this)\n }, "\\u5EF6\\u8FDF\\u5173\\u95ED\\u5BF9\\u8BDD\\u6846")));\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { Modal, ButtonGroup, Button } from 'uiw';\n\nclass Demo extends React.Component {\n constructor() {\n super();\n this.state = {\n visible: false,\n }\n this.time = null\n }\n onClick() {\n this.setState({ visible: !this.state.visible });\n }\n onClosed() {\n this.setState({ visible: false });\n }\n render() {\n return (\n <div>\n <Modal\n title=\"\u6a21\u6001\u5bf9\u8bdd\u6846\"\n isOpen={this.state.visible}\n confirmText=\"\u786e\u5b9a\u6309\u94ae\"\n cancelText=\"\u53d6\u6d88\u6309\u94ae\"\n type=\"danger\"\n onCancel={() => {\n clearTimeout(this.time)\n console.log('\u60a8\u70b9\u51fb\u4e86\u53d6\u6d88\u6309\u94ae\uff01')\n }}\n onClosed={this.onClosed.bind(this)}\n onConfirm={() => {\n console.log('\u786e\u5b9a\u56de\u8c03\uff01, \u8fd9\u91cc\u662f\u5229\u7528Promise\u7b49\u6267\u884c\u5b8c\u6210\u518d\u53bb\u5173\u95ed\u7a97\u53e3');\n return new Promise((resolve, reject) => {\n const random = Math.random();\n console.log('\u6d4b\u8bd5\uff0c\u968f\u673a\u503c\u5927\u4e8e 0.5 \u6267\u884c resolve \u4e8b\u4ef6\uff0c\u5426\u5219 \u6267\u884c reject \u89e6\u53d1 catch \u9519\u8bef', random, random > 0.5)\n this.