antd的select组件之前一直在用，但是在某些端不适用，而且原来的Select样式修改起来不灵活，导致了自己写组件的想法。查看选择组件：

选择onchange={(value)={this。value=value}} optionvalue=' 1 '男人/optionvalue=' 0 '女人/选项/选择。可以看到数据都在option中，数值与显示的数据一一对应。如果我们编写一个select组件，应该有一个onChange方法，它应该访问子元素，div没有value属性，所以option也应该是一个有value属性的组件。下面是我写的组件的用法：

从“”导入{MobileSelect，MobileOption}././components/MobiLe select '；mobile select disabled={ isDisabled } value={ data . clarity | | ring response . clarity | | '无暇' } style={ { width : ' 132 px ' } } onChange={(v)=this . changedata value(' clarity '，v)} { (clarity || [])。map((item，i)={ return (MobileOption)键={i ''}值={ item . code } { item . title }/mobile option)；})} /MobileSelect可以看出它类似于一般的Select组件用法。效果如下：

这些是组件

从“mobx”导入{可观察到}；从“mobx-react”导入{观察者}；从“反应”导入做出反应；从“蚂蚁”导入{图标}；"进口"。/index。“少”；接口IProps {已禁用？布尔型；onChange？(值)=void价值？字符串|数字；风格？反应CSSProperties .类名？字符串；}@observerexport类移动选择扩展了做出反应.component iprops { @ observable show option=false；//是否弹出下拉框@可观测量值： any=//当前选中的价值值@ observable text: any=//选中的价值值对应的文本@可观测量cell: any//组件的数字正射影像图节点componentDidMount(): void {//获取选择框的参考文献，当在组件外点击时的时候收起下拉框文件。addeventlistener(' click '，(e)={ if (this.cell this.cell！==e.target！这个。细胞。包含(e . target)){这个。show option=false} },真);}组件将接收道具(下一个道具3360 readonlyops，下一个上下文： any): void {//根据传入的价值值，遍历孩子们，找到对应值的展示文本if (nextProps.value！==这个。道具。值| |下一个道具。孩子们！==这个.道具.孩子){反应过来.孩子们。地图(这个。道具。children，(child，index)={ if(下一个道具。value===child。道具。value){ this。text=child。道具。儿童；} });} } render(): React .ReactNode { const {children，value }=this . propsonsole . log(值);返回(div类名={ ' Mobile-Select ' this。道具。类名} style={ this。道具。style } ref={(node)=this。cell=node } div类名={ ' Select-wrap ' } OnClick={()={//禁用不能弹出下拉框if(！这个。道具。已禁用){此。show option=！this.showOption} }}图标类型="向下"样式={this.showOption？{ transform : ' rotate(180度)' } : { transform : ' rotate(0度)' } }类名={ ' select-icon ' }/{ this。text }/div类名={ ' option-wrap ' } style={ this。显示选项？{位置： '绝对' } : {显示： '无' } } {作出反应.Children.map(children，(child，index)={ //设置选中选择权和未选中选择权的样式让optionClassName=if(this。道具。value===child。道具。value){ option类名=child。道具。班级名称？' child.props.className '选项-项目已选定' : '选项-项目已选定；} else { option类名=child。道具。类名“option-item”；} return (div onClick={()={ //为了在父组件给子组件添加单击事件事件，包裹了一层分区/有无待清扫房事件都能改变值如果(这个。道具。重视这一点。道具。onchange){ this。道具。onchange(子级。道具。值)；} else { this。text=child。道具。儿童；这个。value=child。道具。价值；}控制台。日志(这个。值)；this.showOption=！this.showOption} } style={ this。道具。style }类名={ option类名} { child }/div)；})}/div/div)；} }界面OptionProps {值？字符串|数字；类名？字符串；风格？反应CSSProperties}导出类移动选项扩展了做出反应.组件选项道具{ render(): React .react node { const { children }=this。道具；return(div style={ this。道具。style } { children }/div)；}}下面是组件的样式。移动-选择{显示：内嵌块；最小宽度： 100像素；余量： 0 6px .select-wrap { border : 1px solid # e0c 0 a 2；边界半径： 4pxpadd : 5px 11 pxdisplay : flex flex-direction :行反转；正义-内容：空格；align-items:居中；选择图标{ transit :3s；向右浮动：} } .option-wrap { box-shadow : 0 5px # 333；z指数： 1000；边界半径： 5px。选项-项目{底色： # fffpadding: 2px 11px最小宽度： 100像素；所选{底色： # fbe6d 0；} } }}总的来说只实现了挑选的基本功能。有改进的地方请指点一二。

附言：反应选择默认值选中问题

从“反应”导入做出反应；从“反应世界”导入{ render }；类应用扩展了做出反应.组件{构造器（道具){ super(道具);这个。state={ project :[]，value : ' ' }；} componentDidMount() { //模拟创建交互式、快速动态网页应用的网页开发技术调用，成功之后把需要改变的默认值赋值给这个。国家。value setTimeout(()={ this。setstate({ project : [{ id : 1，name : ’)花生}，{ id: 2，name: '苹果}，{ id: 3，name: '杨桃} ]，值： ^ 1 })；}, 3000);} HandleClick(){ this。SetState({ project :[{ id : 4，name: ')水果}，{ id: 5，name: '西瓜}，{ id: 6，name: '哈哈哈} ]，值： 4 })；} HandleChange=e={ this。SetState({ value : e . target。value })；};render(){ let projects=this。国家。项目；返回(div按钮OnClick={ this。手柄点击。绑定(此)异步拉取数据/button {/*这里不用再去判断项目的长度是否大于0,在创建交互式、快速动态网页应用的网页开发技术里面做判断就行，如果小于零或者不存在它就是默认值*/}选择DefaultValue=' ' value={ this。国家。value } OnChange={ this。handleChange } { PROJECts。长度0 PROJECts。map((item，I)={ return(option key={ I } value={ item。id } { item。name }/option)；})}/select/div)；} }渲染(App /，文档。getelementbyid(' root ')；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。