35-a28f22da2d828c0b81f9.js

webpackJsonp([35],{1557:function(n,a,s){"use strict";function t(n){return n&&n.__esModule?n:{default:n}}function p(n){return w.default.createElement(n.tag,(0,l.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function o(n){return w.default.createElement(p,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function e(n){return w.default.createElement(p,{tag:"style",html:n.style})}function c(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),c(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var u=s(7),l=t(u),i=s(123),k=t(i),r=s(1),d=t(r),g=s(4),m=t(g),f=s(2),v=t(f),h=s(3),y=t(h),O=s(0),w=t(O),S=s(232),b=t(S),x=s(359),E=function(){var n=x.Select.Option;return w.default.createElement(x.Select,null,w.default.createElement(n,{value:"1"},"Option 1"),w.default.createElement(n,{value:"2"},"Option 2"),w.default.createElement(n,{value:"3"},"Option 3"))},_=function(){var n=(x.Select.Option,[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]),a=function(a){function s(){var n,a,t,p;(0,d.default)(this,s);for(var o=arguments.length,e=Array(o),c=0;c<o;c++)e[c]=arguments[c];return a=t=(0,v.default)(this,(n=s.__proto__||Object.getPrototypeOf(s)).call.apply(n,[this].concat(e))),t.state={selectedValue:"2"},t.reRender=function(){t.forceUpdate()},t.selectChangeHandler=function(n,a){t.setState({selectedValue:a.value})},t.reset=function(){t.setState({selectedValue:""})},p=a,(0,v.default)(t,p)}return(0,y.default)(s,a),(0,m.default)(s,[{key:"render",value:function(){return w.default.createElement("div",null,w.default.createElement("span",null,"外部状态: ",this.state.selectedValue),w.default.createElement("br",null),w.default.createElement("br",null),w.default.createElement(x.Select,{placeholder:"选择一项",data:n,onChange:this.selectChangeHandler,value:this.state.selectedValue}),w.default.createElement(x.Button,{onClick:this.reset},"重置为初始状态"),w.default.createElement(x.Button,{onClick:this.reRender},"重新渲染"))}}]),s}(O.Component);return w.default.createElement(a,null)},D=function(){var n=(x.Select.Option,function(n){function a(){var n,s,t,p;(0,d.default)(this,a);for(var o=arguments.length,e=Array(o),c=0;c<o;c++)e[c]=arguments[c];return s=t=(0,v.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(e))),t.state={selectedValue:"2",selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]},t.reRender=function(){t.forceUpdate()},t.selectChangeHandler=function(n,a){t.setState({selectedValue:a.value})},t.reset=function(){t.setState({selectData:[]})},t.refill=function(){t.setState({selectData:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]})},p=s,(0,v.default)(t,p)}return(0,y.default)(a,n),(0,m.default)(a,[{key:"render",value:function(){return w.default.createElement("div",null,w.default.createElement(x.Select,{data:this.state.selectData,onChange:this.selectChangeHandler,value:this.state.selectedValue}),w.default.createElement(x.Button,{onClick:this.reset},"空数组选项"),w.default.createElement(x.Button,{onClick:this.refill},"重置"))}}]),a}(O.Component));return w.default.createElement(n,null)},j=function(){var n=["Option 1","Option 2","Option 3"];return w.default.createElement(x.Select,{resetOption:!0,resetText:"...",data:n})},C=function(){var n=[{value:0,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}];return w.default.createElement(x.Select,{data:n})},T=function(){var n=[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}];return w.default.createElement(x.Select,{data:n,optionValue:"id",optionText:"name"})},N=function(){function n(n,a){x.Dialog.openDialog({children:a.name+" 被删除了，它的值是 "+a.id})}var a=[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}];return w.default.createElement(x.Select,{data:a,optionValue:"id",optionText:"name",onChange:n})},z=function(){var n=[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}];return w.default.createElement(x.Select,{data:n,optionValue:"id",optionText:"name",disabled:!0})},V=function(){var n=x.Select.Option;return w.default.createElement(x.Select,{autoWidth:!0,open:!0,className:"zent-select--auto-width"},w.default.createElement(n,{value:"1"},"Option 1"),w.default.createElement(n,{value:"2"},"Option 2"),w.default.createElement(n,{value:"3"},"Option 3"))},A=function(){var n=[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}];return w.default.createElement(x.Select,{data:n,optionValue:"id",optionText:"name",onEmptySelected:function(n){},filter:function(n,a){return n.name.indexOf(a)>-1}})},R=function(){var n=function(n){return[{text:n+"__a",value:n+"__a"},{text:n+"__b",value:n+"__b"},{text:n+"__c",value:n+"__c"},{text:n+"__d",value:n+"__d"},{text:n+"__e",value:n+"__e"}]},a=function(a){function s(){var a,t,p,o;(0,d.default)(this,s);for(var e=arguments.length,c=Array(e),u=0;u<e;u++)c[u]=arguments[u];return t=p=(0,v.default)(this,(a=s.__proto__||Object.getPrototypeOf(s)).call.apply(a,[this].concat(c))),p.state={selected:{value:""},tags:[],options:n("origin")},p.onAsyncFilter=function(a){setTimeout(function(){p.setState({options:n(a)})},1e3)},p.onTagsAsyncFilter=function(a){var s=p.state.tags;setTimeout(function(){p.setState({options:(s.length?s:[]).concat(n(a).filter(function(n){return!s.find(function(a){return a.value===n.value})}))})},1e3)},p.onChange=function(n,a){p.setState({selected:a})},p.onTagChange=function(n,a){p.setState({tags:[].concat((0,k.default)(p.state.tags),[a])})},p.onTagDelete=function(n){var a=p.state.tags.slice(0);p.setState({tags:a.filter(function(a){return a.value!==n.value})})},o=t,(0,v.default)(p,o)}return(0,y.default)(s,a),(0,m.default)(s,[{key:"render",value:function(){var n=this.state,a=n.selected,s=n.options,t=n.tags;return w.default.createElement("div",{className:"async-filter__wrapper"},w.default.createElement(x.Select,{data:s,value:a.value,onChange:this.onChange,onAsyncFilter:this.onAsyncFilter,onEmptySelected:function(n){}}),w.default.createElement("br",null),w.default.createElement("br",null),w.default.createElement(x.Select,{tags:!0,autoWidth:!0,className:"async-filter__tags",data:s,value:t.map(function(n){return n.value}),onChange:this.onTagChange,onDelete:this.onTagDelete,onAsyncFilter:this.onTagsAsyncFilter,onEmptySelected:function(n){}}))}}]),s}(O.Component);return w.default.createElement(a,null)},B=function(){var n=[{id:1,name:"Option 1"},{id:2,name:"Option 2"},{id:3,name:"Option 3"}];return w.default.createElement(x.Select,{data:n,optionValue:"id",optionText:"name",searchPlaceholder:"Search",filter:function(n,a){return n.name.indexOf(a)>-1}})},M=function(){var n=[{value:1,text:"Option 1"},{value:2,text:"Option 2"},{value:3,text:"Option 3"}];return w.default.createElement(x.Select,{data:n,emptyText:"No Result",filter:function(n,a){return n.text.indexOf(a)>-1}})},H=function(){var n=function(n){function a(){var n,s,t,p;(0,d.default)(this,a);for(var o=arguments.length,e=Array(o),c=0;c<o;c++)e[c]=arguments[c];return s=t=(0,v.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(e))),t.state={selected:["1"],data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"}]},t.reset=function(){t.setState({selected:[]})},t.upgradeData=function(){t.setState({data:[{value:"1",text:"Option 1"},{value:"2",text:"Option 2"},{value:"3",text:"Option 3"},{value:"4",text:"Option 4"}]})},t.increaseHandler=function(n,a){t.setState({value:t.state.selected.push(a.value)}),x.Notify.success(w.default.createElement("span",null,"新加的选项是 ",a.value))},t.deleteHandler=function(n){var a=t.state.selected.filter(function(a){return a!==n.value});t.setState({selected:a}),x.Notify.success(w.default.createElement("span",null,"被删除的选项是 ",n.value))},p=s,(0,v.default)(t,p)}return(0,y.default)(a,n),(0,m.default)(a,[{key:"render",value:function(){return w.default.createElement("div",null,w.default.createElement("span",null,"外部状态: ",this.state.selected.join(",")),w.default.createElement("br",null),w.default.createElement("br",null),w.default.createElement(x.Select,{data:this.state.data,onChange:this.increaseHandler,onDelete:this.deleteHandler,tags:!0,filter:function(n,a){return n.text.indexOf(a)>-1},value:this.state.selected}),w.default.createElement(x.Button,{onClick:this.reset},"重置"),w.default.createElement(x.Button,{onClick:this.upgradeData},"填充数据"))}}]),a}(O.Component);return w.default.createElement(n,null)},P=function(n){function a(){var n,s,t,p;(0,d.default)(this,a);for(var o=arguments.length,e=Array(o),c=0;c<o;c++)e[c]=arguments[c];return s=t=(0,v.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(e))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},p=s,(0,v.default)(t,p)}return(0,y.default)(a,n),(0,m.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,o=a.children;return w.default.createElement("div",{className:"zandoc-react-demo"},w.default.createElement("div",{className:"zandoc-react-demo__preview"},o),w.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},w.default.createElement("div",{className:"zandoc-react-demo__title"},w.default.createElement("p",null,s||"")),w.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&w.default.createElement("pre",{className:"zandoc-react-demo__code"},w.default.createElement(p,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(O.Component),F=function(n){function a(){return(0,d.default)(this,a),(0,v.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,y.default)(a,n),(0,m.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,b.default)(document.documentElement,0,c(a,-9))}}},{key:"render",value:function(){return w.default.createElement("div",{className:"zandoc-react-container",key:null},w.default.createElement(e,{style:".zent-select--auto-width {\n\twidth: 300px;\n}\n\n.async-filter__tags {\n\twidth: 400px;\n}"}),w.default.createElement(o,{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>'}),w.default.createElement(P,{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>'},w.default.createElement(E)),w.default.createElement(P,{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>'},w.default.createElement(_)),w.default.createElement(P,{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>'},w.default.createElement(D)),w.default.createElement(P,{title:"字符串数组带重置选项",id:"Demoarray",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>'},w.default.createElement(j)),w.default.createElement(P,{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>'},w.default.createElement(C)),w.default.createElement(P,{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>'},w.default.createElement(T)),w.default.createElement(P,{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>'},w.default.createElement(N)),w.default.createElement(P,{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>'},w.default.createElement(z)),w.default.createElement(P,{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>'},w.default.createElement(V)),w.default.createElement(P,{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>'},w.default.createElement(A)),w.default.createElement(P,{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>'},w.default.createElement(R)),w.default.createElement(P,{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>'},w.default.createElement(B)),w.default.createElement(P,{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>'},w.default.createElement(M)),w.default.createElement(P,{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>'},w.default.createElement(H)),w.default.createElement(o,{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>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);a.default=F}});