113-bc4eac5649ec72ccd951.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{640:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return W});var t=s(580),p=s.n(t),o=s(581),e=s.n(o),c=s(23),u=s.n(c),l=s(24),i=s.n(l),k=s(25),r=s.n(k),d=s(26),g=s.n(d),m=s(32),f=s.n(m),h=s(27),v=s.n(h),y=s(28),w=s.n(y),O=s(0),b=s.n(O),x=s(111),E=s(82),S=function(){var n=E.qb.Option;return b.a.createElement(E.qb,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(){E.qb.Option;var n=[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}],a=function(a){function s(){var n,a;u()(this,s);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return a=r()(this,(n=g()(s)).call.apply(n,[this].concat(p))),w()(f()(a),"state",{selectedValue:"2"}),w()(f()(a),"reRender",function(){a.forceUpdate()}),w()(f()(a),"selectChangeHandler",function(n,s){a.setState({selectedValue:s.value})}),w()(f()(a),"reset",function(){a.setState({selectedValue:""})}),a}return v()(s,a),i()(s,[{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(E.qb,{placeholder:"选择一项",data:n,onChange:this.selectChangeHandler,value:this.state.selectedValue}),b.a.createElement(E.i,{onClick:this.reset},"重置为初始状态"),b.a.createElement(E.i,{onClick:this.reRender},"重新渲染"))}}]),s}(O.Component);return b.a.createElement(a,null)},D=function(){E.qb.Option;var n=function(n){function a(){var n,s;u()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return s=r()(this,(n=g()(a)).call.apply(n,[this].concat(p))),w()(f()(s),"state",{selectedValue:"2",selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(f()(s),"reRender",function(){s.forceUpdate()}),w()(f()(s),"selectChangeHandler",function(n,a){s.setState({selectedValue:a.value})}),w()(f()(s),"reset",function(){s.setState({selectData:[]})}),w()(f()(s),"refill",function(){s.setState({selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]})}),s}return v()(a,n),i()(a,[{key:"render",value:function(){return b.a.createElement("div",null,b.a.createElement(E.qb,{data:this.state.selectData,onChange:this.selectChangeHandler,value:this.state.selectedValue}),b.a.createElement(E.i,{onClick:this.reset},"空数组选项"),b.a.createElement(E.i,{onClick:this.refill},"重置"))}}]),a}(O.Component);return b.a.createElement(n,null)},C=function(){return b.a.createElement(E.qb,{resetOption:!0,resetText:"...",data:["Option 1","Option 2","Option 3"]})},j=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name"})},T=function(){return b.a.createElement(E.qb,{data:[{value:0,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}]})},N=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",onChange:function(n,a){E.u.openDialog({children:"".concat(a.name," 被删除了，它的值是 ").concat(a.id)})}})},z=function(){return b.a.createElement(E.qb,{data:[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}],optionValue:"id",optionText:"name",disabled:!0})},V=function(){var n=E.qb.Option;return b.a.createElement(E.qb,{autoWidth:!0,open:!0,className:"zent-select--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"))},R=function(){return b.a.createElement(E.qb,{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){function s(){var a,t;u()(this,s);for(var p=arguments.length,o=new Array(p),c=0;c<p;c++)o[c]=arguments[c];return t=r()(this,(a=g()(s)).call.apply(a,[this].concat(o))),w()(f()(t),"state",{selected:{value:""},tags:[],options:n("origin")}),w()(f()(t),"onAsyncFilter",function(a){setTimeout(function(){t.setState({options:n(a)})},1e3)}),w()(f()(t),"onTagsAsyncFilter",function(a){var s=t.state.tags;setTimeout(function(){t.setState({options:(s.length?s:[]).concat(n(a).filter(function(n){return!s.find(function(a){return a.value===n.value})}))})},1e3)}),w()(f()(t),"onChange",function(n,a){t.setState({selected:a})}),w()(f()(t),"onTagChange",function(n,a){t.setState({tags:[].concat(e()(t.state.tags),[a])})}),w()(f()(t),"onTagDelete",function(n){var a=t.state.tags.slice(0);t.setState({tags:a.filter(function(a){return a.value!==n.value})})}),t}return v()(s,a),i()(s,[{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(E.qb,{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(E.qb,{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)}}))}}]),s}(O.Component);return b.a.createElement(a,null)},q=function(){return b.a.createElement(E.qb,{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(E.qb,{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){function a(){var n,s;u()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return s=r()(this,(n=g()(a)).call.apply(n,[this].concat(p))),w()(f()(s),"state",{selected:["1"],data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]}),w()(f()(s),"reset",function(){s.setState({selected:[]})}),w()(f()(s),"upgradeData",function(){s.setState({data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"},{value:"4",text:"Option 4"}]})}),w()(f()(s),"increaseHandler",function(n,a){s.setState({value:s.state.selected.push(a.value)}),E.db.success(b.a.createElement("span",null,"新加的选项是 ",a.value))}),w()(f()(s),"deleteHandler",function(n){var a=s.state.selected.filter(function(a){return a!==n.value});s.setState({selected:a}),E.db.success(b.a.createElement("span",null,"被删除的选项是 ",n.value))}),s}return v()(a,n),i()(a,[{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(E.qb,{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(E.i,{onClick:this.reset},"重置"),b.a.createElement(E.i,{onClick:this.upgradeData},"填充数据"))}}]),a}(O.Component);return b.a.createElement(n,null)},F=function(){return b.a.createElement(E.qb,{retainNullOption:!0,data:[{text:"Value is null",value:null},"Option 2","Option 3"],onChange:function(n,a){console.log(a.value)}})};function B(n){return b.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function $(n){return b.a.createElement(B,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function P(n){return b.a.createElement(B,{tag:"style",html:n.style})}var I=function(n){function a(){var n,s;u()(this,a);for(var t=arguments.length,p=new Array(t),o=0;o<t;o++)p[o]=arguments[o];return s=r()(this,(n=g()(a)).call.apply(n,[this].concat(p))),w()(f()(s),"state",{showCode:!1}),w()(f()(s),"toggle",function(){s.setState({showCode:!s.state.showCode})}),s}return v()(a,n),i()(a,[{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(B,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(O.Component),W=function(n){function a(){return u()(this,a),r()(this,g()(a).apply(this,arguments))}return v()(a,n),i()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(x.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(P,{style:".zent-select--auto-width {\n\twidth: 300px;\n}\n\n.async-filter__tags {\n\twidth: 400px;\n}"}),b.a.createElement($,{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(I,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</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(S)),b.a.createElement(I,{title:"受控模式下使用组件",id:"Democontrolled",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<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 punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">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>event<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token 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 function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token punctuation">:</span> selected<span class="token punctuation">.</span>value <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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token punctuation">:</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 punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<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>Select</span>\n          <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</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 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 punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectChangeHandler<span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<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>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重置为初始状态<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reRender<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重新渲染<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</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(I,{title:"动态修改选项数据",id:"Demodynamic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<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 punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span>\n    selectData<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">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>event<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectedValue<span class="token punctuation">:</span> selected<span class="token punctuation">.</span>value\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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectData<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 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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selectData<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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>Select</span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectData<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectChangeHandler<span class="token punctuation">}</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedValue<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>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>空数组选项<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>refill<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Demo</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(D)),b.a.createElement(I,{title:"字符串数组带重置选项",id:"Demoreset",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">resetOption</span> <span class="token attr-name">resetText</span><span class="token attr-value"><span class="token punctuation">=</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 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(C)),b.a.createElement(I,{title:"支持自定义选项字段",id:"Democustom",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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">=</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">=</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(j)),b.a.createElement(I,{title:"对象数组",id:"Demoobjectarray",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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(T)),b.a.createElement(I,{title:"支持自定义回调",id:"Democallback",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Dialog <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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>ev<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  Dialog<span class="token punctuation">.</span><span class="token function">openDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    children<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>name<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>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token 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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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">=</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">=</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 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(N)),b.a.createElement(I,{title:"禁用状态",id:"Demodisable",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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">=</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">=</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(z)),b.a.createElement(I,{title:"支持自动调整弹出层的宽度",id:"Demoautowidth",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> Option <span class="token operator">=</span> Select<span class="token punctuation">.</span>Option<span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</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">=</span><span class="token punctuation">"</span>zent-select--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>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option <span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Option</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Select</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(V)),b.a.createElement(I,{title:"支持选项过滤",id:"Demofilter",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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">=</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">=</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 punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">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 punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">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(R)),b.a.createElement(I,{title:"支持异步选项过滤",id:"Demoasyncfilter",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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> keyword <span class="token operator">=></span> <span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token template-string"><span class="token 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><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 punctuation">:</span> <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n    options<span class="token punctuation">:</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> keyword <span class="token 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 operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        options<span class="token punctuation">:</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> keyword <span class="token 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>state<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 operator">=></span> <span class="token punctuation">{</span>\n      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n        <span class="token comment">/*\n         * 为了确保多选的选中状态不丢失\n         * 需要对异步操作进行特殊处理\n         *\n         * 将已选中的项添加进新 options, 同时做去重\n         */</span>\n        options<span class="token punctuation">:</span> <span class="token punctuation">(</span>tags<span class="token punctuation">.</span>length <span class="token operator">?</span> tags <span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">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 function">filter</span><span class="token punctuation">(</span>newOption <span class="token operator">=></span>\n            <span class="token operator">!</span>tags<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>tag <span class="token operator">=></span> tag<span class="token punctuation">.</span>value <span class="token operator">===</span> newOption<span class="token punctuation">.</span>value<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>e<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\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>e<span class="token punctuation">,</span> selected<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      tags<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>tags<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> deleted <span class="token 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>state<span class="token punctuation">.</span>tags<span class="token punctuation">.</span><span class="token function">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 function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      tags<span class="token punctuation">:</span> tags<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>tag <span class="token operator">=></span> tag<span class="token punctuation">.</span>value <span class="token operator">!==</span> deleted<span class="token punctuation">.</span>value<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>state<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">=</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>Select</span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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 punctuation">=</span><span class="token punctuation">{</span>selected<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onAsyncFilter<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">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>Select</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">=</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 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 punctuation">=</span><span class="token punctuation">{</span>tags<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>tag <span class="token operator">=></span> tag<span class="token punctuation">.</span>value<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 punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onTagChange<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onTagDelete<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onAsyncFilter</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onTagsAsyncFilter<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onEmptySelected</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AsyncFilterDemo</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(I,{title:"自定义搜索框文案",id:"Democustomtext",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> name<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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">=</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">=</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">=</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 punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">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(I,{title:"自定义搜索无匹配文案",id:"Demoemptytext",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span>\n    <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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">=</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 punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>text<span class="token punctuation">.</span><span class="token function">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(I,{title:"标签多选",id:"Demotag",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select<span class="token punctuation">,</span> Button<span class="token punctuation">,</span> Notify <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</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 punctuation">:</span> <span class="token punctuation">[</span>\n      <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected<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 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 operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      data<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n        <span class="token punctuation">{</span> value<span class="token punctuation">:</span> <span class="token string">\'1\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'2\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'3\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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 punctuation">:</span> <span class="token string">\'4\'</span><span class="token punctuation">,</span> text<span class="token punctuation">:</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>event<span class="token punctuation">,</span> item<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      value<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>value<span class="token punctuation">)</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    Notify<span class="token punctuation">.</span><span class="token function">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>value<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>item<span class="token punctuation">)</span> <span class="token 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>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>value <span class="token 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>value<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 function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      selected<span class="token punctuation">:</span> newSelected\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    Notify<span class="token punctuation">.</span><span class="token function">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>value<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 punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">\',\'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\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>Select</span>\n          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token 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 punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increaseHandler<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onDelete</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>deleteHandler<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 punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> keyword<span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>text<span class="token punctuation">.</span><span class="token function">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 punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<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>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>reset<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>upgradeData<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>填充数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">></span></span>\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\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TagsDemo</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(I,{title:"选择值为 null 的选项",id:"Demoretainnulloption",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Select <span class="token punctuation">}</span> <span class="token keyword">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 punctuation">:</span> <span class="token string">\'Value is null\'</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> <span class="token keyword">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>evt<span class="token punctuation">,</span> item<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Select</span> <span class="token attr-name">retainNullOption</span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token 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 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($,{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<tr>\n<td>prefix</td>\n<td>自定义前缀</td>\n<td>string</td>\n<td><code>\'zent\'</code></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>'}))}}]),a}(O.Component)}}]);