react写一个select组件的实现代码

<select onchange={(value) => {this.value=value}}
  <option value='1'>man</option>
  <option value='0'>woman</option>
</select>

import {mobileselect, mobileoption} from '../../components/mobileselect';

 <mobileselect
  disabled={isdisabled}
  value={data.clarity || ringresponse.clarity || 'flawless'}
  style={{ width: '132px' }}
  onchange={(v) => this.changedatavalue('clarity', v)}
 >
  {
   (clarity || []).map((item, i) => {
    return (
     <mobileoption key={i + ''} value={item.code}>{item.title}</mobileoption>
    );
   })
  }
 </mobileselect>

import {observable} from 'mobx';
import {observer} from 'mobx-react';
import react from 'react';
import {icon} from 'antd';
import './index.less';

interface iprops {
 disabled?: boolean;
 onchange?: (value) => void;
 value?: string | number;
 style?: react.cssproperties;
 classname?: string;
}
@observer
export class mobileselect extends react.component<iprops> {
 @observable showoption = false;   // 是否弹出下拉框
 @observable value: any = '';    // 当前选中的value值
 @observable text: any = '';     // 选中的value值对应的文本
 @observable cell: any;       // 组件的dom节点
 componentdidmount(): void {
  // 获取选择框的ref，当在组件外点击时的时候收起下拉框
  document.addeventlistener('click', (e) => {
   if (this.cell && this.cell !== e.target && !this.cell.contains(e.target)) {
    this.showoption = false;
   }
  }, true);
 }
 componentwillreceiveprops(nextprops: readonly<iprops>, nextcontext: any): void {
  // 根据传入的value值，遍历children，找到对应值的展示文本
  if (nextprops.value !== this.props.value || nextprops.children !== this.props.children) {
   react.children.map(this.props.children, (child, index) => {
    if (nextprops.value === child.props.value) {
     this.text = child.props.children;
    }
   });
  }
 }
 render(): react.reactnode {
  const {children, value} = this.props;
  console.log(value);
  return (
   <div
    classname={'mobile-select ' + this.props.classname}
    style={this.props.style}
    ref={(node) => this.cell = node}
   >
    <div
     classname={'select-wrap'}
     onclick={() => {
      // 禁用不能弹出下拉框
      if (!this.props.disabled) {
       this.showoption = !this.showoption;
      }
     }}
    >
     <icon type='down' style={this.showoption ? {transform: 'rotate(180deg)'} : {transform: 'rotate(0deg)'}} classname={'select-icon'}/>
     {this.text}
    </div>
    <div classname={'option-wrap'} style={this.showoption ? {position: 'absolute'} : {display: 'none'}}>
     {
      react.children.map(children, (child, index) => {
       // 设置选中option和未选中option的样式
       let optionclassname = '';
       if (this.props.value === child.props.value) {
        optionclassname = child.props.classname ? child.props.classname + ' option-item selected' : 'option-item selected';
       } else {
        optionclassname = child.props.classname + ' option-item';
       }
       return (
        <div
         onclick={() => {     // 为了在父组件给子组件添加onclick事件，包裹了一层div
          // 有无onchange事件都能改变值
          if (this.props.value && this.props.onchange) {
           this.props.onchange(child.props.value);
          } else {
           this.text = child.props.children;
           this.value = child.props.value;
          }
          console.log(this.value);
          this.showoption = !this.showoption;
         }}
         style={this.props.style}
         classname={optionclassname}
        >{child}</div>
       );
      })
     }
    </div>
   </div>
  );
 }
}
interface optionprops {
 value?: string | number;
 classname?: string;
 style?: react.cssproperties;
}
export class mobileoption extends react.component<optionprops> {
 render(): react.reactnode {
  const {children} = this.props;
  return (
   <div style={this.props.style}>
    {children}
   </div>
  );
 }
}

.mobile-select {
 display: inline-block;
 min-width: 100px;
 margin: 0 6px;
 .select-wrap {
  border: 1px solid #e0c0a2;
  border-radius: 4px;
  padding: 5px 11px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  .select-icon {
   transition: .3s;
   float: right;
  }
 }
 .option-wrap {
  box-shadow: 0 0 5px #333;
  z-index: 1000;
  border-radius: 5px;
  .option-item {
   background-color: #fff;
   padding: 2px 11px;
   min-width: 100px;
   &.selected {
    background-color: #fbe6d0;
   }
  }
 }
}

import react from "react";
import { render } from "react-dom";

class app extends react.component {
 constructor(props) {
  super(props);
  this.state = {
   projects: [],
   value: ""
  };
 }
 componentdidmount() {
  // 模拟ajax调用，成功之后把需要改变的默认值赋值给this.state.value
  settimeout(() => {
   this.setstate({
    projects: [
     { id: 1, name: "花生" },
     { id: 2, name: "苹果" },
     { id: 3, name: "杨桃" }
    ],
    value: 1
   });
  }, 3000);
 }
 handleclick() {
  this.setstate({
   projects: [
    { id: 4, name: "水果" },
    { id: 5, name: "西瓜" },
    { id: 6, name: "哈哈哈" }
   ],
   value: 4
  });
 }
 handlechange = e => {
  this.setstate({
   value: e.target.value
  });
 };
 render() {
  let projects = this.state.projects;
  return (
   <div>
    <button onclick={this.handleclick.bind(this)}>异步拉取数据</button>
    {/* 这里不用再去判断project的长度是否大于0，在ajax里面做判断就行，如果小于零或者不存在它就是默认值 */}
    <select
     defaultvalue=""
     value={this.state.value}
     onchange={this.handlechange}
    >
     {projects.length > 0 &&
      projects.map((item, i) => {
       return (
        <option key={i} value={item.id}>
         {item.name}
        </option>
       );
      })}
    </select>
   </div>
  );
 }
}

render(<app />, document.getelementbyid("root"));