ant官网示例

image.pngimage.png

  1. import { Select } from 'antd';
  3. const { Option } = Select;
  5. function handleChange(value) {
  6.   console.log(value);
  7. }
  8. //单选
  9. <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
  10.   <Option value="jack">Jack</Option>
  11.   <Option value="lucy">Lucy</Option>
  12.   <Option value="disabled" disabled>Disabled</Option>
  13.   <Option value="Yiminghe">yiminghe</Option>
  14. </Select>
  15. //多选
  16. <Select mode="multiple" defaultValue={["a10","b11"]} clearable onChange={(val:string)=>valueChange(val)}>
  17.   <Option value="a10" label="a10">a10</Option>
  18.   <Option value="b11">b11</Option>
  19.   <Option value="c12">c12</Option>
  20.   <Option value="d13">d13</Option>
  21.   <Option value="e14">e14</Option>
  22. </Select>

单选功能

需求分析

组件可传入的属性有：
和

为了实现预览中的效果，我们需要管理三个状态，先给他们起个名字：列表展开收起 isShowOptions，输入框展示的值 selectedText， 回调给onChange的值 selectedValue。*这个地方可以优化后面mode = multiple时再谈

它的结构分为两部分：展示选中项 & 下拉选项框。
展示选中项点击只需要设置 isShowOptions = true 即可。
下拉选项框中点击某个选项有以下变化：
selectedValue = value
selectedText = label
isShowOptions = false

动手制作

option组件

option组件什么都不需要做，后面再Select组件中会使用props.children获取里面所有属性。

  1. import React from 'react';
  2. interface IOption{
  3.       value:any;
  4.     label?:any;
  5.     children:any; 
  6. }
  7. const Option:React.FC<IOption>=(props:IOption)=>{
  8.     return (
  9.         ""
  10.     )
  11. }

Select组件

基础功能：点击切换展示值，触发onChange回调
遍历一下children属性，渲染列表项。点击某一个列表项的时候修改一些状态，并触发onchange事件

  1. import React,{useState, useEffect} from 'react';
  2. interface ISelect{
  3.     defaultValue?:any;
  4.     children:any;
  5.     onChange?:any;
  6. }
  7. interface IOption{
  8.       value:any;
  9.     label?:any;
  10.     children:any; 
  11. }
  12. const Select:React.FC<ISelect>=(props:ISelect)=>{
  13.   const { children, onChange } = props;
  14.   const [isShowOption,setShowStatus] = useState(false)
  15.   const [selectedValue,setSelectedValue] = useState(null)
  16.   const [selectedText,setselectedText] = useState(null)
  17.   return (
  18.     <div className="select">
  19.       <div className="selectedText">
  20.         展示值：{selectedText}
  21.       </div>
  22.       <div className="selectOptions">
  23.         {children.map((item: any, index: number)=>{
  24.             const optionComponentProps:IOption = item.props
  25.             return (
  26.               <div key={index} onClick={()=>{
  27.                 setSelectedValue(optionComponentProps.value || "")
  28.                 setselectedText(optionComponentProps.label || optionComponentProps.children || '')
  29.                 onChange(optionComponentProps.value)
  30.               }}>
  31.                       {optionComponentProps.label || optionComponentProps.children || ''}
  32.                     </div>
  33.                 )
  34.         })}
  35.       </div>
  36.     </div>
  37.     )
  38. }
  39. export {Select}

增加功能： 收起展开状态

  1.         const OptionList = ()=>{
  2.  // 仅当isShowOptions === true且select有子元素时渲染，没有则显示空状态
  3.         if(isShowOption){
  4.             if(children&&children.length>0){
  5.                 return (
  6.                     <div className="selectOptions">
  7.                         {children.map((item:any,index:number)=>{
  8.                                       const optionComponentProps:IOption = item.props
  9.                             return (
  10.                                 <div className="optionsClasses" key={index} onClick={
  11.                                     ()=>{
  12.                                         setSelectedValue(optionComponentProps.value || "")
  13.                                                                 setselectedText(optionComponentProps.label || optionComponentProps.children || '')
  14.                                                                 onChange(optionComponentProps.value)
  15.                                         setShowStatus(false)
  16.                                     }
  17.                                 }>
  18.                                   {optionComponentProps.label || optionComponentProps.children || ''}
  19.                                 </div>
  20.                             )
  21.                         })}
  22.                     </div>
  23.                 )
  24.             }else{
  25.                 return (
  26.                     <div className="selectOptions">
  27.                         <div>no data</div>
  28.                     </div>
  29.                 )
  30.             }
  31.         }
  32.         return ""
  33.     }
  34.     return (
  35.         <div className="select">
  36.             <div className="selectedText" onClick={()=>setShowStatus(!isShowOption)}>
  37.                 展示值：{selectedText}
  38.             </div>
  39.             {OptionList()}
  40.         </div>
  41.     )

新增功能：在 select 组件外任何地方点击时，一律收起 select 组件。
列表展开时无论再次点击哪里都隐藏列表，元素内点击只需要setShowStatus(false)即可，那节点外的地方呢？
我们引入useRef，给select绑定ref。在点击展示框的时候添加监听事件，判断e.target和ref元素之间的关系确定是否隐藏列表，并在收起列表时取消监听事件

  1. import React,{useState, useEffect, useRef} from 'react';        
  2.         const selectRef:any = useRef();        
  3.         const fn = (e:any)=>{
  4.         if(selectRef.current !== e.target && !selectRef.current.contains(e.target)){
  5.             setShowStatus(false) 
  6.         }
  7.     }
  8.     const addListener = ()=>{
  9.         document.addEventListener('click', fn, true);
  10.     }
  11.     const removeListener = ()=>{
  12.         document.removeEventListener('click', fn, true);
  13.     }
  14.     useEffect(()=>{
  15.         if(!isShowOption){
  16.             removeListener()
  17.         }
  18.     },[isShowOption])
  20. //输出
  21.         <div className="select" ref={selectRef}>
  22.         <div className="selectedText" onClick={()=>{
  23.             addListener();
  24.             setShowStatus(!isShowOption)}}>
  25.             展示值：{selectedText}
  26.         </div>
  27.         {OptionList()}
  28.     </div>

下拉列表直接展示每个option的children， 展示区域则需要做一些判断。
增加Option组件的 label属性，如果没有传入label属性，就使用option的children，考虑到option的children不一定是纯文本，可能像是这样《span》123《/span》。所以要再做一层判断，如果是纯文本使用纯文本，如果不是，使用option的value属性。

  1. interface IOption{
  2.       value?:any;
  3.       label?:any;
  4.     children:any;
  5. }
  6. const getInnerText = (child:any)=>{
  7.     if(typeof child.props.children==='string'){
  8.         return child.props.children
  9.     }else{
  10.         return child.props.value
  11.     }
  12. }
  13. const OptionList = ()=>{
  14.     if(isShowOption){
  15.         if(children&&children.length>0){
  16.             return (
  17.                 <div className="selectOptions">
  18.                     {children.map((item:any,index:number)=>{
  19.                         let label = item.props.label || getInnerText(item)
  20.                         return (
  21.                             <div className="optionsClasses" key={index} onClick={
  22.                                 ()=>{
  23.                                     onChange(item.props.value)
  24.                                     setSelectedValue(item.props.value||"")
  25.                                     setselectedText(label || "")
  26.                                     setShowStatus(false)
  27.                                 }
  28.                             }>
  29.                                 {item.props.children}
  30.                             </div>
  31.                         )
  32.                     })}
  33.                 </div>
  34.             )
  35.         }else{
  36.             return (
  37.                 <div className="selectOptions">
  38.                     <div>no data</div>
  39.                 </div>
  40.             )
  41.         }
  42.     }
  43.     return ""
  44. }

基础的功能已经完成了，接下来增加CSS样式，以及完善：初始值，清空，禁用项等功能

完整代码

  1. import React,{useState, useEffect, useRef} from 'react';
  2. import classNames from 'classnames';
  3. import {ThemeContext} from '../../App';
  4. import Icon from '../Icon'
  5. interface ISelect{
  6.     defaultValue?:any;
  7.     children?:any;
  8.     onChange?:any;
  9. }
  10. interface IOption{
  11.     children:any;
  12.     value?:any;
  13.     label?:any;
  14. }
  15. const Option:React.FC<IOption>=(props:IOption)=>{
  16.     return (
  17.         ""
  18.     )
  19. }
  20. const Select:React.FC<ISelect> = (props)=>{
  21.     const { children, onChange, defaultValue } = props;
  22.     const getInnerText = (child:any)=>{
  23.         if(typeof child.props.children==='string'){
  24.             return child.props.children
  25.         }else{
  26.             return child.props.value
  27.         }
  28.     }
  29.     const getDefaultText = (dv:any)=>{
  30.         if(!children || children.length<1){
  31.             return null
  32.         }
  33.         for(let i=0;i<children.length;i++){
  34.             if(children[i].props.value === dv){
  35.                 return children[i].props.label || getInnerText(children[i])
  36.             }
  37.         }
  38.     }
  39.     //usestate
  40.     const [isShowOption,setShowStatus] = useState(false)
  41.     const [iconRotate,setIconRotate] = useState({ transform:"rotate(0deg)" })
  42.     const [selectedValue,setSelectedValue] = useState( defaultValue )
  43.     const [selectedText,setselectedText] = useState( getDefaultText(defaultValue) )
  47.     //eventlistener
  48.     const selectRef:any = useRef();
  49.     const fn = (e:any)=>{
  50.         if(selectRef.current!==e.target && !selectRef.current.contains(e.target)){
  51.             setShowStatus(false) 
  52.         }
  53.     }
  54.     const addListener = ()=>{
  55.         document.addEventListener('click', fn, true);
  56.     }
  57.     const removeListener = ()=>{
  58.         document.removeEventListener('click', fn, true);
  59.     }
  61.     //useeffect
  62.     useEffect(()=>{
  63.         if(!isShowOption){
  64.             setIconRotate({transform:"rotate(0deg)"})
  65.             removeListener()
  66.         }else{
  67.             setIconRotate({transform:"rotate(-180deg)"})
  68.         }
  69.     },[isShowOption])
  70.     //列表
  71.     const OptionList = ()=>{
  72.         if(isShowOption){
  73.             if(children && children.length>0){
  74.                 return (
  75.                     <div className="selectOptions">
  76.                         {children.map((item:any)=>{
  77.                             const optionsClasses = classNames("optionItem",{"optionItem-selected":selectedValue===item.props.value})
  78.                             let label = item.props.label || getInnerText(item)
  79.                             return (
  80.                                 <div className={optionsClasses} key={item.props.value} onClick={
  81.                                     ()=>{
  82.                                         onChange(item.props.value)
  83.                                         setSelectedValue(item.props.value||"")
  84.                                         setselectedText(label || "")
  85.                                         setShowStatus(false)
  86.                                     }
  87.                                 }>
  88.                                     <div style={{flex:"auto"}}>
  89.                                         {item.props.children}
  90.                                     </div>
  91.                                     <div>
  92.                                         <Icon style={{color:"#1890ff"}} icon="icon-select"/>
  93.                                     </div>
  94.                                 </div>
  95.                             )
  96.                         })}
  97.                     </div>
  98.                 )
  99.             }else{
  100.                 return (
  101.                     <div className="selectOptions">
  102.                         <div>no data</div>
  103.                     </div>
  104.                 )
  105.             }
  106.         }
  107.         return ""
  108.     }
  110.     //展示
  111.     const displayArea = ()=>{
  112.         const selectedClass=classNames("selectedText",{"selectedText-focus":isShowOption})
  113.         return (
  114.             <div className={selectedClass} onClick={()=>{
  115.                 addListener();
  116.                 setShowStatus(!isShowOption)}}>
  117.                 <div style={{paddingRight:"12px"}}>
  118.                     {selectedText}
  119.                 </div>
  120.                 <span className="suffixIcon" style={iconRotate}>
  121.                     <Icon style={{fontSize:"16px"}} icon="icon-arrow-down-bold"></Icon>
  122.                 </span>
  123.             </div>
  124.         )
  125.     }
  127.     return (
  128.         <div className="select" ref={selectRef}>
  129.             {displayArea()}
  130.             {OptionList()}
  131.         </div>
  132.     )
  133. }
  135. export {Select,Option}
  1. .select{
  2.     position: relative;
  3.     width:200px;
  4.     height: 32px;
  5.     line-height: 32px;
  6. }
  7. .suffixIcon{
  8.     display: inline-block;
  9.     font-size:16px;
  10.     position: absolute;
  11.     height: 100%;
  12.     right: 10px;
  13.     top: 0;
  14.     text-align: center;
  15.     color: #c0c4cc;
  16.     -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  17.     transition: all .3s cubic-bezier(.645,.045,.355,1);
  18.     transform-origin: center;
  19.     cursor:pointer;
  20. }
  21.     .selectedText{
  22.         position: relative;
  23.         height: 100%;
  24.         line-height: inherit;
  25.         padding: 0 8px;
  26.         width:inherit;
  27.         border: 1px solid #d9d9d9;
  28.         box-sizing: content-box;
  29.         border-radius: 2px;
  30.         background-color:#fff;
  31.         display: inline-block;
  32.         cursor: pointer;
  33.         -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  34.         transition: all .3s cubic-bezier(.645,.045,.355,1);
  35.         .multipleBox{
  36.             padding-right:12px;
  37.             display: flex;
  38.             align-items: center;
  39.             height: inherit;
  40.             .multipleItem{
  41.                 background: #f5f5f5;
  42.                 border: 1px solid #f0f0f0;
  43.                 border-radius: 2px;
  44.                 margin-right:8px;
  45.                 display:inline-block;
  46.                 height: calc(100% - 4px);
  47.                 display: flex;
  48.                 align-items: center;
  49.                 padding:0 4px 0 8px;
  50.                 //line-height: 28px;
  51.                 .item-label{
  52.                     color:rgba(0,0,0,.85);
  53.                     margin-right: 4px;
  54.                 }
  55.                 .item-icon{
  56.                     font-size: 12px;
  57.                     -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  58.                     transition: all .3s cubic-bezier(.645,.045,.355,1);
  59.                     color:rgba(0,0,0,.45);
  60.                 }
  61.                 .item-icon:hover{
  62.                     color:rgba(0,0,0,.85);
  63.                 }
  64.             }
  65.         }
  66.     }
  67.     .selectedText:hover{
  68.         border-color: #40a9ff;
  69.     }
  70.     .selectedText-focus{
  71.         border-color: #40a9ff;
  72.         border-right-width: 1px!important;
  73.         outline: 0;
  74.         -webkit-box-shadow: 0 0 0 2px rgba(24,144,255,.2);
  75.         box-shadow: 0 0 0 2px rgba(24,144,255,.2)
  76.     }
  77.     .selectOptions{
  78.         position: absolute;
  79.         z-index:9;
  80.         top:45px;
  81.         left:0;
  82.         //overflow-y: scroll;
  83.         width:inherit;
  84.         max-height: 274px;
  85.         border: 1px solid #e4e7ed;
  86.         border-radius: 4px;
  87.         background-color: #fff;
  88.         box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  89.         box-sizing: content-box;
  90.         margin: 5px 0;
  91.         height:auto;
  92.         .optionItem{
  93.             display: flex;
  94.             cursor: pointer;
  95.             font-size: 14px;
  96.             padding:0 20px;
  97.             height:34px;
  98.             line-height:34px;
  99.             color:black;
  100.         }
  101.         .optionItem-selected{
  102.             font-weight: bold;
  103.         }
  104.         .optionItem:hover{
  105.             background-color: #f5f7fa;
  106.         }
  107.         .optionItem-selected, .optionItem-selected:hover{
  108.             background-color:#e6f7ff
  109.         }
  110.     }

多选功能

需求分析

多选功能 select传入mode=”multiple” 列出与单选的区别点：
（1）defaultValue是数组的形式[‘a10’, ‘c12’]；
（2）onchange返回值也是数组形式value=[‘a10’, ‘c12’]；
（3）输入区域 每点击一个项都会展示该项的小标签，可删除
（4）展示列表
1。只有点击列表外区域才会收起，点击列表内不收起。
2。点击列表内某个项目时更改背景色，屁股后面加个钩。
3。输入框清除标签时，也要清除列表项的样式和钩

思路分析

输出值和展示值都为数组的情况下 那么selectedValue和selectedText也一定是一个数组。selectedText：我们点击列表项“a10”的时候，涉及到一次遍历：如果selectedText没有“a10”元素：添加一个元素，如果有：filter过滤掉该元素，selectedValue 也是一样。
每点击一次列表项的时候，我都要遍历两次数组，麻烦，而且代码有点冗余，我需要一个优化的方案，把他们统一放在一起管理。把selectedText和selectedValue的每一项放进一个对象里，这时候再加一个isSelect字段来管理是否被选中，
这样一来，每次点击列表项只需要遍历一次修改isSelect取反即可，是不是一下子方便了很多。
新增option的key属性，如果没有使用option的value属性。一起存放在对象里，遍历的时候设置key，避免重复。
我们看一下数据结构，在开始的时候需要遍历children处理，输出initData。

  1. const data=[
  2.     {
  3.         key:"1",
  4.         isSelect:false,
  5.         label:"Jack",
  6.         value:"value",
  7.     },
  8.     {
  9.         key:"2",
  10.         isSelect:false,
  11.         label:"label2",
  12.         value:"value2",
  13.     },
  14. ]

开始动手

展示框区域

  1. const getInnerText = (child:any)=>{
  2.     if(typeof child.props.children==='string'){
  3.         return child.props.children
  4.     }else{
  5.         return child.props.value
  6.     }
  7. }
  8. const setInitData = ()=>{
  9.     if(!children || children.length<1){
  10.         return []
  11.     }
  12.     let initData=[]
  13.     for(let i=0;i<children.length;i++){
  14.         initData.push({
  15.             key:children[i].props.key || children[i].props.value,
  16.             //通过defaultValue默认值初始化选中状态
  17.             isSelect:defaultValue.indexOf(children[i].props.value) > -1 ? true : false,
  18.             label:children[i].props.label || getInnerText(children[i]) || "",
  19.             value:children[i].props.value,
  20.         })
  21.     }
  22.     return initData
  23. }
  24. const [selectedInfo,setselectedInfo] = useState<any[]>( setInitData() )
  25. //点击列表项的事件
  26. const multipleClick = (item:any)=>{
  27.     setselectedInfo(selectedInfo.map((info:any)=>{
  28.         if(info.key===(item.key || item.value)){
  29.             return {...info,isSelect:!info.isSelect}
  30.         }
  31.         return info
  32.     }))
  33. }
  34. //展示框区域  只要遍历出isSelect为true的对象渲染即可
  35. //每一个项目是一个小标签，有删除按钮可以删除
  36. {selectedInfo.map((item:any)=>{
  37.     if(item.isSelect){
  38.         return (
  39.             <div className="multipleItem" key={item.key}>
  40.                 <span className="item-label">
  41.                     {item.label}
  42.                 </span>
  43.                 <span onClick={()=>{
  44.                     multipleClick(item)
  45.                 }}>
  46.                     <Icon className="item-icon" icon="icon-close-bold"/>
  47.                 </span>
  48.             </div>
  49.         )
  50.     }
  51.     return ""
  52. })}

此处有一个问题，点击小标签的删除，会触发外部输入框的下拉事件，我们不想点击删除的时候还顺便展示或者收起菜单，这是典型的事件冒泡，只要在小标签的事件上取消冒泡即可event.stopPropagation()

  1. const multipleClick = (item:any,e:any)=>{
  2.     e.stopPropagation()
  3.     setselectedInfo(selectedInfo.map((info:any)=>{
  4.         if(info.key===(item.key || item.value)){
  5.             return {...info,isSelect:!info.isSelect}
  6.         }
  7.         return info
  8.     }))
  9. }
  10. //元素上加上参数别忘了
  11. onClick={(e)=>multipleClick(item,e)}

标签长度超出了输入框长度时我们希望他能自动换行，我们使用css实现即可

  1. .autoBreak{
  2.   min-height: 32px;
  3.   -webkit-box-flex: 1;
  4.   -ms-flex: auto;
  5.   flex: auto;
  6.   -ms-flex-wrap: wrap;
  7.   flex-wrap: wrap;
  8.   max-width: 100%;
  9. }

由于列表使用绝对定位，当输入框高度发生变化时，列表的top值也要发生变化。新增一个状态管理列表top值，绑定在列表的style属性上。使用useEffect每次selectinfo状态发生变化时，获得输入框的高度，如果变高增加相应的top值。

  1. const [top,setTop] = useState(40) //初始高度40
  2. useEffect(()=>{
  3.     let height = document.getElementsByClassName("multipleBox")[0].clientHeight //30
  4.     setTop(10+height)
  5. },[selectedInfo])
  6. //绑定在绝对定位的元素上 style={{top:top+'px'}}
  7. //顺便把其top属性删除

下拉列表区域

输入框搞定了，再来看看展示列表吧,之前我们直接循环select.children，很不优雅，现在我们循环selectedInfo即可，isSelect为true增加打钩的icon

  1. {selectedInfo.map((info:any)=>{
  2.     const optionsClasses = classNames("optionItem",{"optionItem-selected":info.isSelect})
  3.     const iconArea = info.isSelect?(<div><Icon style={{color:"#1890ff"}} icon="icon-select"/></div>):""
  4.     return (
  5.         <div className={optionsClasses} key={info.key} onClick={()=>multipleClick(info)}>
  6.             <div style={{flex:"auto"}}>
  7.                 {info.label}
  8.             </div>
  9.             {iconArea}
  10.         </div>
  11.     )
  12. })}

当子元素太多，展示列表长度会把遮住页面上的信息很不友好，所以我们给他一个最大高度，超出时用滚动条。用 overflow-y:scroll 加上设置 max-height。

onchange事件：

触发select上的onchange事件上的参数，单选返回字符串格式，mode=”multiple” 返回数组形式，默认值也是如此
一开始我想在列表元素点击的事件中触发onchange事件的，后来发现在事件绑定中修改state是异步的。

  1. //错误示例
  2. const multipleClick = (item:any,e:any)=>{
  3.         e.stopPropagation()
  4.         if(mode==="multiple"){ 
  5.             //此处更新为异步
  6.             setselectedInfo(selectedInfo.map((info:ISelectInfo)=>{
  7.                 if(info.key===(item.key || item.value)){  
  8.                     return {...info,isSelect:!info.isSelect}
  9.                 }
  10.                 return info
  11.             }))
  12.               //把选中元素回调到onChange
  13.               //这里并不能获取最新的selectInfo
  14.               onChange(selectedInfo.filter((item:any)=>item.isSelect))
  15.         }
  16.     }

只能根据selectinfo的变化在effect中触发onchange了。

  1. let flag=useRef(true)
  2. useEffect(()=>{
  3.     //为了让他第一次进来不调用
  4.     if(flag.current){
  5.         flag.current=false
  6.         return
  7.     }
  8.     if(mode==="multiple"){
  9.         let emitVal:any[]=[]
  10.         selectedInfo.map((item:any)=>{
  11.             if(item.isSelect) emitVal.push(item.value)
  12.         })
  13.         onChange(emitVal)
  14.     }
  15. },[selectedInfo])

在页面中使用多个select组件对应会生成多个className为”multipleBox”，document.getElementsByClassName(“multipleBox”)[0]会有错误
在”multipleBox”上再加个id根据isshowoption判断。true的话id为calcHeight，否则为空，再使用document.getElementById(“calcHeight”)

  1. let doc:HTMLElement | null = document.getElementById("calcHeight")
  2. let height:number = doc?doc.clientHeight:32
  3. <div className="multipleBox" id={isShowOption?"calcHeight":""} >

完整代码

兼容单选和多选

  1. import React,{useState, useEffect, useRef} from 'react';
  2. import classNames from 'classnames';
  3. import Icon from '../Icon'
  4. interface ISelect{
  5.     mode?:string;
  6.     defaultValue?:any;
  7.     clearable?:boolean;
  8.     children:any;
  9.     onChange?:any;
  10. }
  11. interface IOption{
  12.     children:any;
  13.     value?:any;
  14.     label?:any;
  15. }
  16. interface ISelectInfo{
  17.     key:string;
  18.     isSelect:boolean;
  19.     value:any;
  20.     label:any;
  22. }
  23. //util工具方法
  24. const getInnerText = (child:any)=>{
  25.     if(typeof child.props.children==='string'){
  26.         return child.props.children
  27.     }else{
  28.         return child.props.value
  29.     }
  30. }
  31. const isSelect = (dv:any,cv:any)=>{
  32.     if(typeof dv==="string"){
  33.         return dv===cv
  34.     }else if(typeof dv==="object"){
  35.         return dv.indexOf(cv)>-1
  36.     }
  37.     return false
  38. }
  40. const Option:React.FC<IOption>=(props:IOption)=>{
  41.     return (
  42.         <div>
  43.             <p>{props.children}</p>
  44.         </div>
  45.     )
  46. }
  47. const Select:React.FC<ISelect> = (props)=>{
  48.     const { children, onChange, clearable, defaultValue=[], mode } = props;
  49.     // init
  50.     const setInitData = ()=>{
  51.         if(!children || children.length<1){
  52.             return []
  53.         }
  54.         let initData:ISelectInfo[]=[]
  55.         for(let i=0;i<children.length;i++){
  56.             initData.push({
  57.                 key:children[i].props.key || children[i].props.value,
  58.                 isSelect:isSelect(defaultValue,children[i].props.value),
  59.                 label:children[i].props.label || getInnerText(children[i]) || "",
  60.                 value:children[i].props.value,
  61.             })
  62.         }
  63.         return initData
  64.     }
  65.     //usestate
  66.     const [isShowOption,setShowStatus] = useState(false)
  67.     const [iconRotate,setIconRotate] = useState({ transform:"rotate(0deg)" })
  68.     const [top,setTop] = useState(40)
  69.     const [selectedInfo,setselectedInfo] = useState<ISelectInfo[]>( setInitData() )
  70.     //点击事件监听
  71.     const selectRef:any = useRef();
  72.     const fn = (e:any)=>{
  73.         if(selectRef.current!==e.target && !selectRef.current.contains(e.target)){
  74.             setShowStatus(false) 
  75.         }
  76.     }
  77.     const addListener = ()=>{
  78.         document.addEventListener('click', fn, true);
  79.     }
  80.     const removeListener = ()=>{
  81.         document.removeEventListener('click', fn, true);
  82.     }
  83.     //useeffect
  84.     useEffect(()=>{
  85.         if(!isShowOption){
  86.             setIconRotate({transform:"rotate(0deg)"})
  87.             removeListener()
  88.         }else{
  89.             setIconRotate({transform:"rotate(-180deg)"})
  90.         }
  91.     },[isShowOption])
  92.     let flag=useRef(true)
  93.     useEffect(()=>{
  94.         let doc:HTMLElement | null = document.getElementById("calcHeight")
  95.         let height:number = doc?doc.clientHeight:32
  96.         setTop(10+height)
  97.         if(flag.current){
  98.             flag.current=false
  99.             return
  100.         }
  101.         if(mode==="multiple"){
  102.             let emitVal:any[]=[]
  103.             selectedInfo.map((item:ISelectInfo)=>{
  104.                 if(item.isSelect) emitVal.push(item.value)
  105.             })
  106.             onChange(emitVal)
  107.         }else{
  108.             selectedInfo.map((item:ISelectInfo)=>{
  109.                 if(item.isSelect) onChange(item.value)
  110.             })
  111.             setShowStatus(false)
  112.         }
  113.     },[selectedInfo])
  115.     //onclick事件： 清空，下拉，选择
  116.     const handleClear = (e:any)=>{
  117.         e.stopPropagation();
  118.         setselectedInfo(selectedInfo.map((info:ISelectInfo)=>{
  119.             return {...info,isSelect:false}
  120.         }))
  121.     }
  122.     const dropDown = ()=>{
  123.         addListener();
  124.         setShowStatus(!isShowOption)
  125.     }
  126.     const multipleClick = (item:any,e:any)=>{
  127.         e.stopPropagation()
  128.         if(mode==="multiple"){ 
  129.             //此处更新为异步
  130.             setselectedInfo(selectedInfo.map((info:ISelectInfo)=>{
  131.                 if(info.key===(item.key || item.value)){  
  132.                     return {...info,isSelect:!info.isSelect}
  133.                 }
  134.                 return info
  135.             }))
  136.         }else{
  137.             setselectedInfo(selectedInfo.map((info:ISelectInfo)=>{
  138.                 if(info.key===(item.key || item.value)){
  140.                     return {...info,isSelect:true}
  141.                 }
  142.                 return {...info,isSelect:false}
  143.             }))
  144.         }
  145.     }
  146.     //展示框
  147.     const displayArea = ()=>{
  148.         const selectedClass=classNames("selectedText",{"selectedText-focus":isShowOption})
  149.         const dropDownIcon = mode!=="multiple"
  150.             ?(<Icon className="suffixIcon" style={iconRotate} icon="icon-arrow-down-bold"/>)
  151.             :"";
  152.         const clearIcon = clearable && selectedInfo.some((item:ISelectInfo)=>item.isSelect)
  153.             ?(<span className="clearIcon" onClick={(e)=>handleClear(e)}>
  154.                 <Icon style={{fontSize:"14px"}} icon="icon-close-bold"/>
  155.             </span>)
  156.             :"";
  157.         const displayInline =(item:any)=>{
  158.             if(item.isSelect){
  159.                 return mode==="multiple"
  160.                     ?(
  161.                         <div className="multipleItem" key={item.key}>
  162.                             <span className="item-label">
  163.                                 {item.label}
  164.                             </span>
  165.                             <span onClick={(e)=>multipleClick(item,e)}>
  166.                                 <Icon className="item-icon" icon="icon-close-bold"/>
  167.                             </span>
  168.                         </div>
  169.                     )
  170.                     :(
  171.                         <div style={{paddingRight:"12px"}} key={item.key}>
  172.                             {item.label}
  173.                         </div>
  174.                     )
  175.             }
  176.             return ""
  177.         } 
  178.         return (
  179.             <div className={selectedClass} onClick={()=>dropDown()}>
  180.                 <div className="multipleBox" id={isShowOption?"calcHeight":""}>
  181.                     {selectedInfo.map((item:ISelectInfo)=>{
  182.                         return displayInline(item)
  183.                     })}
  184.                 </div>
  185.                 {dropDownIcon}
  186.                 {clearIcon}
  187.             </div>
  188.         )
  189.     }
  190.     //列表
  191.     const OptionList = ()=>{
  192.         if(isShowOption){
  193.             if(children && children.length>0){
  194.                 const row = (info:any)=>{
  195.                     const optionsClasses = classNames("optionItem",{"optionItem-selected":info.isSelect})
  196.                     const iconArea = info.isSelect?(<div><Icon style={{color:"#1890ff"}} icon="icon-select"/></div>):""
  197.                     return mode==="multiple"
  198.                         ?(<div className={optionsClasses} key={info.key} onClick={(e)=>multipleClick(info,e)}>
  199.                             <div style={{flex:"auto",userSelect: "none"}}>
  200.                                 {info.label}
  201.                             </div>
  202.                             {iconArea}
  203.                         </div>)
  204.                         :(<div className={optionsClasses} key={info.key} onClick={(e)=>multipleClick(info,e)}>
  205.                             {info.label}
  206.                         </div>)
  207.                 }
  208.                 return (
  209.                     <div className="selectOptions" style={{top:top+'px'}}>
  210.                         {selectedInfo.map((info:ISelectInfo)=>{
  211.                             {return row(info)}
  212.                         })}
  213.                     </div>
  214.                 )
  215.             }else{
  216.                 return (
  217.                     <div className="selectOptions">
  218.                         <div>no data</div>
  219.                     </div>
  220.                 )
  221.             }
  222.         }
  223.         return ""
  224.     }
  225.     return (
  226.         <div className="select" ref={selectRef}>
  227.             {displayArea()}
  228.             {OptionList()}
  229.         </div>
  230.     )
  231. }
  232. export {Select,Option}

样式代码

  1. .select{
  2.     position: relative;
  3.     width:220px;
  4.     min-height: 32px;
  6. }
  7. .suffixIcon{
  8.     display: inline-block;
  9.     font-size:14px;
  10.     line-height: 32px;
  11.     position: absolute;
  12.     z-index: 2020;
  13.     height: 100%;
  14.     right: 9px;
  15.     top: 0;
  16.     text-align: center;
  17.     color: #c0c4cc;
  18.     -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  19.     transition: all .3s cubic-bezier(.645,.045,.355,1);
  20.     cursor:pointer;
  21. }
  22.     .selectedText{
  23.         position: relative;
  24.         height: 100%;
  25.         line-height: inherit;
  26.         padding: 0 8px;
  27.         width:inherit;
  28.         border: 1px solid #d9d9d9;
  29.         box-sizing: content-box;
  30.         border-radius: 2px;
  31.         background-color:#fff;
  32.         cursor: pointer;
  33.         -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  34.         transition: all .3s cubic-bezier(.645,.045,.355,1);
  35.         .multipleBox{
  36.             padding-right:12px;
  37.             display: flex;
  38.             align-items: center;
  39.             height: inherit;
  40. /********* 高度自动撑开 **************/
  41.             min-height: 32px;
  42.             -webkit-box-flex: 1;
  43.             -ms-flex: auto;
  44.             flex: auto;
  45.             -ms-flex-wrap: wrap;
  46.             flex-wrap: wrap;
  47.             max-width: 100%;
  48.             .multipleItem{
  49.                 background: #f5f5f5;
  50.                 border: 1px solid #f0f0f0;
  51.                 border-radius: 2px;
  52.                 margin:2px 8px 2px 0;
  53.                 display:inline-block;
  55.                 display: flex;
  56.                 align-items: center;
  57.                 padding:0 4px 0 8px;
  58.                 //line-height: 28px;
  59.                 .item-label{
  60.                     color:rgba(0,0,0,.85);
  61.                     margin-right: 4px;
  62.                     user-select: none;
  63.                 }
  64.                 .item-icon{
  65.                     font-size: 12px;
  66.                     -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
  67.                     transition: all .3s cubic-bezier(.645,.045,.355,1);
  68.                     color:rgba(0,0,0,.45);
  69.                 }
  70.                 .item-icon:hover{
  71.                     color:rgba(0,0,0,.85);
  72.                 }
  73.             }
  74.         }
  75.         .clearIcon{
  76.             position: absolute;
  77.             top: 50%;
  78.             right: 11px;
  79.             z-index: 2021;
  80.             display: inline-block;
  81.             width: 12px;
  82.             height: 12px;
  83.             margin-top: -6px;
  84.             color: rgba(0,0,0,.25);
  85.             font-size: 12px;
  86.             font-style: normal;
  87.             line-height: 1;
  88.             text-align: center;
  89.             text-transform: none;
  90.             background: #fff;
  91.             cursor: pointer;
  92.             opacity: 0;
  93.             -webkit-transition: color .3s ease,opacity .15s ease;
  94.             transition: color .3s ease,opacity .15s ease;
  95.             text-rendering: auto;
  96.             &:hover{
  97.                 color: rgba(0,0,0,.65);
  98.             }
  99.         }
  100.     }
  101.     .selectedText:hover{
  102.         border-color: #40a9ff;
  103.     }
  104.     .selectedText:hover .clearIcon{
  105.         opacity: 1;
  106.     }
  107.     .selectedText-focus{
  108.         border-color: #40a9ff;
  109.         border-right-width: 1px!important;
  110.         outline: 0;
  111.         -webkit-box-shadow: 0 0 0 2px rgba(24,144,255,.2);
  112.         box-shadow: 0 0 0 2px rgba(24,144,255,.2)
  113.     }
  114.     .selectOptions{
  115.         position: absolute;
  116.         z-index:9;
  117.         //top:45px; 通过js设置
  118.         left:0;
  119.         overflow-y: scroll;
  120.         width:inherit;
  121.         max-height: 274px;
  122.         border: 1px solid #e4e7ed;
  123.         border-radius: 4px;
  124.         background-color: #fff;
  125.         box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  126.         box-sizing: content-box;
  127.         margin: 5px 0;
  128.         height:auto;
  129.         .optionItem{
  130.             display: flex;
  131.             cursor: pointer;
  132.             font-size: 14px;
  133.             padding:0 20px;
  134.             height:34px;
  135.             line-height:34px;
  136.             color:black;
  137.             user-select: none;
  138.         }
  139.         .optionItem-selected{
  140.             font-weight: bold;
  141.         }
  142.         .optionItem:hover{
  143.             background-color: #f5f7fa;
  144.         }
  145.         .optionItem-selected, .optionItem-selected:hover{
  146.             background-color:#e6f7ff
  147.         }
  148.     }

肯定还有很多不完善的地方。欢迎评论或者直接联系我，谢谢！

image.png