115-9c128e7e1f8e9241073d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{917:function(n,a,s){"use strict";s.r(a),s.d(a,"default",(function(){return U}));var t=s(846),p=s.n(t),e=s(847),o=s.n(e),c=s(840),l=s.n(c),u=s(841),i=s.n(u),k=s(521),r=s.n(k),d=s(842),m=s.n(d),g=s(843),y=s.n(g),h=s(844),f=s.n(h),v=s(845),w=s.n(v),O=s(0),b=s.n(O),S=s(210),x=s(145);function E(n){var a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(n){return!1}}();return function(){var s,t=f()(n);if(a){var p=f()(this).constructor;s=Reflect.construct(t,arguments,p)}else s=t.apply(this,arguments);return y()(this,s)}}var D=function(){var n=x.Select.Option;return b.a.createElement(x.Select,null,b.a.createElement(n,{value:"1"},"Option 1"),b.a.createElement(n,{value:"2"},"Option 2"),b.a.createElement(n,{value:"3"},"Option 3"))},_=function(){x.Select.Option;var n=[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}],a=function(a){m()(t,a);var s=E(t);function t(){var n;l()(this,t);for(var a=arguments.length,p=new Array(a),e=0;e<a;e++)p[e]=arguments[e];return n=s.call.apply(s,[this].concat(p)),w()(r()(n),"state",{selectedValue:"2"}),w()(r()(n),"reRender",(function(){n.forceUpdate()})),w()(r()(n),"selectChangeHandler",(function(a,s){n.setState({selectedValue:s.value})})),w()(r()(n),"reset",(function(){n.setState({selectedValue:""})})),n}return i()(t,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement("span",null,"外部状态: ",this.state.selectedValue),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(x.Select,{placeholder:"选择一项",data:n,onChange:this.selectChangeHandler,value:this.state.selectedValue}),b.a.createElement(x.Button,{onClick:this.reset},"重置为初始状态"),b.a.createElement(x.Button,{onClick:this.reRender},"重新渲染"))}}]),t}(O.Component);return b.a.createElement(a,null)},C=function(){x.Select.Option;var n=function(n){m()(s,n);var a=E(s);function s(){var n;l()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return n=a.call.apply(a,[this].concat(p)),w()(r()(n),"state",{selectedValue:"2",selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(r()(n),"reRender",(function(){n.forceUpdate()})),w()(r()(n),"selectChangeHandler",(function(a,s){n.setState({selectedValue:s.value})})),w()(r()(n),"reset",(function(){n.setState({selectData:[]})})),w()(r()(n),"refill",(function(){n.setState({selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]})})),n}return i()(s,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement(x.Select,{data:this.state.selectData,onChange:this.selectChangeHandler,value:this.state.selectedValue}),b.a.createElement(x.Button,{onClick:this.reset},"空数组选项"),b.a.createElement(x.Button,{onClick:this.refill},"重置"))}}]),s}(O.Component);return b.a.createElement(n,null)},j=function(){return b.a.createElement(x.Select,{resetOption:!0,resetText:"...",data:["Option 1","Option 2","Option 3"]})},T=function(){return b.a.createElement(x.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name"})},N=function(){return b.a.createElement(x.Select,{data:[{value:0,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}]})},z=function(){return b.a.createElement(x.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",onChange:function(n,a){x.Dialog.openDialog({children:"".concat(a.name," 被删除了，它的值是 ").concat(a.id)})}})},V=function(){return b.a.createElement(x.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",disabled:!0})},R=function(){var n=x.Select.Option;return b.a.createElement(x.Select,{autoWidth:!0,open:!0,className:"zent-select-demo-auto-width"},b.a.createElement(n,{value:"1"},"Option 1"),b.a.createElement(n,{value:"2"},"Option 2"),b.a.createElement(n,{value:"3"},"Option 3"))},q=function(){return b.a.createElement(x.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",onEmptySelected:function(n){return console.log(n)},filter:function(n,a){return n.name.indexOf(a)>-1}})},A=function(){var n=function(n){return[{text:"".concat(n,"__a"),value:"".concat(n,"__a")},{text:"".concat(n,"__b"),value:"".concat(n,"__b")},{text:"".concat(n,"__c"),value:"".concat(n,"__c")},{text:"".concat(n,"__d"),value:"".concat(n,"__d")},{text:"".concat(n,"__e"),value:"".concat(n,"__e")}]},a=function(a){m()(t,a);var s=E(t);function t(){var a;l()(this,t);for(var p=arguments.length,e=new Array(p),c=0;c<p;c++)e[c]=arguments[c];return a=s.call.apply(s,[this].concat(e)),w()(r()(a),"state",{selected:{value:""},tags:[],options:n("origin")}),w()(r()(a),"onAsyncFilter",(function(s){setTimeout((function(){a.setState({options:n(s)})}),1e3)})),w()(r()(a),"onTagsAsyncFilter",(function(s){var t=a.state.tags;setTimeout((function(){a.setState({options:(t.length?t:[]).concat(n(s).filter((function(n){return!t.find((function(a){return a.value===n.value}))})))})}),1e3)})),w()(r()(a),"onChange",(function(n,s){a.setState({selected:s})})),w()(r()(a),"onTagChange",(function(n,s){a.setState({tags:[].concat(o()(a.state.tags),[s])})})),w()(r()(a),"onTagDelete",(function(n){var s=a.state.tags.slice(0);a.setState({tags:s.filter((function(a){return a.value!==n.value}))})})),a}return i()(t,[{key:"render",value:function(){var n=this.state,a=n.selected,s=n.options,t=n.tags;return b.a.createElement("div",{className:"async-filter__wrapper"},b.a.createElement(x.Select,{data:s,value:a.value,onChange:this.onChange,onAsyncFilter:this.onAsyncFilter,onEmptySelected:function(n){return console.log(n)}}),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(x.Select,{tags:!0,autoWidth:!0,className:"async-filter__tags",data:s,value:t.map((function(n){return n.value})),onChange:this.onTagChange,onDelete:this.onTagDelete,onAsyncFilter:this.onTagsAsyncFilter,onEmptySelected:function(n){return console.log(n)}}))}}]),t}(O.Component);return b.a.createElement(a,null)},B=function(){return b.a.createElement(x.Select,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",searchPlaceholder:"Search",filter:function(n,a){return n.name.indexOf(a)>-1}})},H=function(){return b.a.createElement(x.Select,{data:[{value:1,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}],emptyText:"No Result",filter:function(n,a){return n.text.indexOf(a)>-1}})},M=function(){var n=function(n){m()(s,n);var a=E(s);function s(){var n;l()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return n=a.call.apply(a,[this].concat(p)),w()(r()(n),"state",{selected:["1"],data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(r()(n),"reset",(function(){n.setState({selected:[]})})),w()(r()(n),"upgradeData",(function(){n.setState({data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"},{value:"4",text:"Option 4"}]})})),w()(r()(n),"increaseHandler",(function(a,s){n.setState({value:n.state.selected.push(s.value)}),x.Notify.success(b.a.createElement("span",null,"新加的选项是 ",s.value))})),w()(r()(n),"deleteHandler",(function(a){var s=n.state.selected.filter((function(n){return n!==a.value}));n.setState({selected:s}),x.Notify.success(b.a.createElement("span",null,"被删除的选项是 ",a.value))})),n}return i()(s,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement("span",null,"外部状态: ",this.state.selected.join(",")),b.a.createElement("br",null),b.a.createElement("br",null),b.a.createElement(x.Select,{data:this.state.data,onChange:this.increaseHandler,onDelete:this.deleteHandler,tags:!0,filter:function(n,a){return n.text.indexOf(a)>-1},value:this.state.selected}),b.a.createElement(x.Button,{onClick:this.reset},"重置"),b.a.createElement(x.Button,{onClick:this.upgradeData},"填充数据"))}}]),s}(O.Component);return b.a.createElement(n,null)},F=function(){return b.a.createElement(x.Select,{retainNullOption:!0,data:[{text:"Value is null",value:null},"Option 2","Option 3"],onChange:function(n,a){console.log(a.value)}})};function $(n){return b.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function P(n){return b.a.createElement($,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function I(n){return b.a.createElement($,{tag:"style",html:n.style})}var W=function(n){m()(s,n);var a=E(s);function s(){var n;l()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return n=a.call.apply(a,[this].concat(p)),w()(r()(n),"state",{showCode:!1}),w()(r()(n),"toggle",(function(){n.setState({showCode:!n.state.showCode})})),n}return i()(s,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return b.a.createElement("div",{className:"zandoc-react-demo"},b.a.createElement("div",{className:"zandoc-react-demo__preview"},p),b.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},b.a.createElement("div",{className:"zandoc-react-demo__title"},b.a.createElement("p",null,s||"")),b.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&b.a.createElement("pre",{className:"zandoc-react-demo__code"},b.a.createElement($,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),s}(O.Component),U=function(n){m()(s,n);var a=E(s);function s(){return l()(this,s),a.apply(this,arguments)}return i()(s,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(S.a)(document.documentElement,0,function n(a,s){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(s+=a.offsetTop),n(a.parentNode,s);return s}(a,-9))}}},{key:"render",value:function(){return b.a.createElement("div",{className:"zandoc-react-container",key:null},b.a.createElement(I,{style:".zent-select-demo-auto-width {\n\twidth: 300px;\n}\n\n.async-filter__tags {\n\twidth: 400px;\n}"}),b.a.createElement(P,{html:'<h2 class="anchor-heading"><a href="#select-xia-la-xuan-ze">¶</a><a href="javascript:void(0)" id="select-xia-la-xuan-ze" class="anchor-point"></a>Select 下拉选择</h2>\n<p>下拉选择，提供多种选择器功能。</p>\n<h3 class="anchor-heading"><a href="#shi-yong-zhi-nan">¶</a><a href="javascript:void(0)" id="shi-yong-zhi-nan" class="anchor-point"></a>使用指南</h3>\n<p>组件分层：主要分成 Select, Popup, Trigger 三个模块</p>\n<h4 class="anchor-heading"><a href="#select">¶</a><a href="javascript:void(0)" id="select" class="anchor-point"></a>Select</h4>\n<p>核心控制器，主要职责是格式化数据，负责 Popup 和 Trigger 间的数据传输</p>\n<h4 class="anchor-heading"><a href="#popup">¶</a><a href="javascript:void(0)" id="popup" class="anchor-point"></a>Popup</h4>\n<p>选项列表弹出层，主要负责展示选项，数据过滤控制</p>\n<h4 class="anchor-heading"><a href="#trigger">¶</a><a href="javascript:void(0)" id="trigger" class="anchor-point"></a>Trigger</h4>\n<ul>\n<li>触发器，暴露给使用者，可以通过 trigger 属性进行配置</li>\n<li>核心的 trigger 有 SelectTrigger 和 InputTrigger</li>\n<li>TagsTrigger 是基于 InputTrigger 扩展出来的拥有多选功能的 trigger</li>\n<li>使用者可以自行扩展或开发 trigger</li>\n</ul>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),b.a.createElement(W,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(D)),b.a.createElement(W,{title:"受控模式下使用组件",id:"Democontrolled",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    selectedValue<span class="token operator">:</span> <span class="token string">\'2\'</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reRender</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">selectChangeHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token comment">// do whatever u want here</span>\n\n    <span class="token comment">// important step for controlled component</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token operator">:</span> selected<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token comment">// or selected[your optionValue]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token operator">:</span> <span class="token string">\'\'</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>外部状态<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedValue</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>选择一项<span class="token punctuation">"</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">selectChangeHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedValue</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reset</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重置为初始状态<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reRender</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重新渲染<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(_)),b.a.createElement(W,{title:"动态修改选项数据",id:"Demodynamic",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    selectedValue<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    selectData<span class="token operator">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reRender</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">selectChangeHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token operator">:</span> selected<span class="token punctuation">.</span><span class="token property-access">value</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectData<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">refill</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectData<span class="token operator">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectData</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">selectChangeHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selectedValue</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reset</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>空数组选项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">refill</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span>\n  <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(C)),b.a.createElement(W,{title:"字符串数组带重置选项",id:"Demoreset",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Option 1\'</span><span class="token punctuation">,</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">resetOption</span> <span class="token attr-name">resetText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(j)),b.a.createElement(W,{title:"支持自定义选项字段",id:"Democustom",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n    <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n    <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(T)),b.a.createElement(W,{title:"对象数组",id:"Demoobjectarray",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n  <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(N)),b.a.createElement(W,{title:"支持自定义回调",id:"Democallback",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n     <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n     <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n     <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">showOption</span><span class="token punctuation">(</span><span class="token parameter">ev<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token maybe-class-name">Dialog</span><span class="token punctuation">.</span><span class="token method function property-access">openDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    children<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 被删除了，它的值是 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n    <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n    <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n    <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>showOption<span class="token punctuation">}</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(z)),b.a.createElement(W,{title:"禁用状态",id:"Demodisable",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n    <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n    <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n    <span class="token attr-name">disabled</span>\n  <span class="token punctuation">/></span></span>\n  <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(V)),b.a.createElement(W,{title:"支持自动调整弹出层的宽度",id:"Demoautowidth",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token maybe-class-name">Option</span> <span class="token operator">=</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Option</span></span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">autoWidth</span>\n    <span class="token attr-name">open</span>\n    <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-select-demo-auto-width<span class="token punctuation">"</span></span>\n  <span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Option</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token maybe-class-name">Option</span> <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Option</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Select</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(R)),b.a.createElement(W,{title:"支持选项过滤",id:"Demofilter",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n    <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n    <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n    <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n    <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(q)),b.a.createElement(W,{title:"支持异步选项过滤",id:"Demoasyncfilter",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">createOptions</span> <span class="token operator">=</span> <span class="token parameter">keyword</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__a</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__a</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__b</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__b</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__c</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__c</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__d</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__d</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__e</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">__e</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">AsyncFilterDemo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    selected<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    tags<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    options<span class="token operator">:</span> <span class="token function">createOptions</span><span class="token punctuation">(</span><span class="token string">\'origin\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onAsyncFilter</span> <span class="token operator">=</span> <span class="token parameter">keyword</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        options<span class="token operator">:</span> <span class="token function">createOptions</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span>\n      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onTagsAsyncFilter</span> <span class="token operator">=</span> <span class="token parameter">keyword</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> tags <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        <span class="token comment">/*\n         * 为了确保多选的选中状态不丢失\n         * 需要对异步操作进行特殊处理\n         *\n         * 将已选中的项添加进新 options, 同时做去重\n         */</span>\n        options<span class="token operator">:</span> <span class="token punctuation">(</span>tags<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">?</span> tags <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>\n          <span class="token function">createOptions</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">newOption</span> <span class="token arrow operator">=></span>\n            <span class="token operator">!</span>tags<span class="token punctuation">.</span><span class="token method function property-access">find</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token arrow operator">=></span> tag<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">===</span> newOption<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>\n          <span class="token punctuation">)</span>\n        <span class="token punctuation">)</span>\n      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onTagChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> selected</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      tags<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token spread operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tags</span><span class="token punctuation">,</span> selected<span class="token punctuation">]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onTagDelete</span> <span class="token operator">=</span> <span class="token parameter">deleted</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> tags <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tags</span><span class="token punctuation">.</span><span class="token method function property-access">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      tags<span class="token operator">:</span> tags<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token arrow operator">=></span> tag<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">!==</span> deleted<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> <span class="token punctuation">{</span> selected<span class="token punctuation">,</span> options<span class="token punctuation">,</span> tags <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async-filter__wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selected<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onAsyncFilter</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">tags</span>\n          <span class="token attr-name">autoWidth</span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async-filter__tags<span class="token punctuation">"</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>options<span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>tags<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token arrow operator">=></span> tag<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTagChange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTagDelete</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTagsAsyncFilter</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n        <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AsyncFilterDemo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(A)),b.a.createElement(W,{title:"自定义搜索框文案",id:"Democustomtext",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n    <span class="token attr-name">optionValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id<span class="token punctuation">"</span></span>\n    <span class="token attr-name">optionText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span>\n    <span class="token attr-name">searchPlaceholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span>\n    <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(B)),b.a.createElement(W,{title:"自定义搜索无匹配文案",id:"Demoemptytext",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span>\n    <span class="token attr-name">emptyText</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>No Result<span class="token punctuation">"</span></span>\n    <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n  <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(H)),b.a.createElement(W,{title:"标签多选",id:"Demotag",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">TagsDemo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n\n  state <span class="token operator">=</span> <span class="token punctuation">{</span>\n    selected<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"1"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    data<span class="token operator">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">]</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">reset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">upgradeData</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      data<span class="token operator">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 1\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 2\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 3\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">\'Option 4\'</span> <span class="token punctuation">}</span>\n      <span class="token punctuation">]</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">increaseHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      value<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">success</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>新加的选项是 <span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function-variable function">deleteHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n\n    <span class="token comment">// 可以使用效率更高或者更优雅的数组定点删除方法，比如 lodash.remove</span>\n    <span class="token keyword">const</span> newSelected <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> value <span class="token operator">!==</span> item<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected<span class="token operator">:</span> newSelected\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">success</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>被删除的选项是 <span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>外部状态<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">\',\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">increaseHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">deleteHandler</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">tags</span>\n          <span class="token attr-name">filter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">reset</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">upgradeData</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>填充数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TagsDemo</span></span> <span class="token punctuation">/></span></span>\n  <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(M)),b.a.createElement(W,{title:"选择值为 null 的选项",id:"Demoretainnulloption",src:'<span class="token keyword module">import</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Select</span> <span class="token punctuation">}</span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">\'Value is null\'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token keyword null nil">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">\'Option 2\'</span><span class="token punctuation">,</span> <span class="token string">\'Option 3\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">evt<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Select</span></span> <span class="token attr-name">retainNullOption</span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},b.a.createElement(F)),b.a.createElement(P,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>选项数据</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>是</td>\n</tr>\n<tr>\n<td>value</td>\n<td>选中的值，当为tags类型时，可以传入数组</td>\n<td>any</td>\n<td><code>null</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>index</td>\n<td>选中索引</td>\n<td>any</td>\n<td><code>null</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>禁用组件</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>默认提示文案</td>\n<td>string</td>\n<td><code>\'请选择\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>searchPlaceholder</td>\n<td>搜索框默认文案</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>emptyText</td>\n<td>空列表提示文案</td>\n<td>string</td>\n<td><code>\'没有找到匹配项\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>自定义触发器</td>\n<td>function</td>\n<td><code>Select.SelectTrigger</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>optionText</td>\n<td>自定义选项显示文案对应的key, 如{ id: 1, name: \'文案\' }, 设置optionText="name"</td>\n<td>string</td>\n<td><code>\'text\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>optionValue</td>\n<td>自定义选项的值对应的key, 如{ id: 1, name: \'文案\' }, 设置optionValue="id"</td>\n<td>string</td>\n<td><code>\'value\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>选择变更后的回调函数</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onDelete</td>\n<td>删除标签后的回调函数</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>filter</td>\n<td>过滤条件，设置以后才会开启过滤功能</td>\n<td>function</td>\n<td><code>null</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>maxToShow</td>\n<td>在有过滤条件时，设置 Option 的最大显示数量</td>\n<td>number</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onAsyncFilter</td>\n<td>异步设置过滤后的数据</td>\n<td>function</td>\n<td><code>null</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onEmptySelected</td>\n<td>选中过滤条件为空时的回调</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>展开时的回调</td>\n<td>function</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>可选，自定义trigger额外类名</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>可选，自定义popup的类名</td>\n<td>string</td>\n<td><code>\'\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>是否自动设置弹出层与输入框等宽</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>resetOption</td>\n<td>是否加入一个重置选项</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>resetText</td>\n<td>重置选项文本</td>\n<td>string</td>\n<td><code>\'...\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>retainNullOption</td>\n<td>开启后可以选中值为 \n<code>null</code>\n 的选项；不能和 \n<code>resetOption</code>\n 同时使用</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>width</td>\n<td>输入框宽度</td>\n<td>string or number</td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p>如果 <code>data</code> 和 <code>children</code> 两种方式同时使用，<code>data</code> 会将 <code>children</code> 覆盖，主要是为了可以接收异步数据直接改变 <code>data</code> 属性来改变选项。</p>\n<h3 class="anchor-heading"><a href="#trigger-kai-fa-api">¶</a><a href="javascript:void(0)" id="trigger-kai-fa-api" class="anchor-point"></a>Trigger开发API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>selectedItems</td>\n<td>已选择的条目</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>extraFilter</td>\n<td>是否自带过滤功能</td>\n<td>boolean</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>open</td>\n<td>是否打开Popup</td>\n<td>boolean</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p>Trigger 可以通过调用 <code>this.props.onChange({...})</code> 通过改变 Popup 的 props 实现参数传递。</p>'}))}}]),s}(O.Component)}}]);