来来来，今天来总结一波。
写后台操作系统很常见的就是会遇到下拉选择框，虽然现在都可以用组件，但是数据毕竟需要自己写，获取的方式也是各种各样，多掌握几种总是好的，避免万一出问题束手无策。
之所以写下这篇总结，是因为我最初因为一个不确定的长度用了一个洋气的map循环来写下拉框的数据，自测的时候一切正常，然后到了测试环境各种打脸，数据死活都不愿意出来。
不管我刷新多少次，重新提交多少次，就是不出来。
环境也不是我搭的，我也没去研究过这个环境配置，自然完全不知道是因为什么导致的。所以最终只能取消这个洋气的循环，老老实实的把数据写死， 希望他能给点脸乖乖的显示出来。
毕竟，领导们可不管你用什么技术，只有效果才是王道。
这个是直接写死数据的写法，直接将代表的英文数据传回去，获取到相对应的汉语数据，展示出来。
<Select></Select> 这个是蚂蚁antd的组件，直接封装好的下拉框，感兴趣的用react的小伙伴可以去看看这个，还是挺方便的，贴上地址，拿走不谢。
https://ant.design/components/select-cn/#header

           <Select
                showSearch
                style={{ width: 200 }}
                // 选择框默认文字
                placeholder="全部"
                // 选项变化时触发事件
                onChange={this.handleChange}
            >
                <Option value="">全部</Option>
                <Option value="LTC">莱特币</Option>
                <Option value="ETH">以太坊</Option>
                <Option value="BCH">比特币现金</Option>
                <Option value="EOS">柚子</Option>
                <Option value="ETC">以太坊经典</Option>
                <Option value="OMNI">比特币</Option>
           </Select>

这个是我之前写的洋气的循环，开发环境没问题，测试环境直接挂，原因不明......

            <Select
                showSearch
                style={{ width: 200 }}
                // 选择框默认文字
                placeholder="全部"
                // 选项变化时触发事件
                onChange={this.handleChange}
              >
                <Option value="">全部</Option>
                {/*将符合结构的数据循环进去*/}
                {
                  this.state.typeList.map((item,index)=>{
                    return <Option value={item}>{item}</Option>
                  })
                }
           </Select>

点击事件也放一下吧，需要的小朋友可以看个思路。

 下拉框搜索事件
  handleChange = (value)=>{
    定义上行参数
    let params = {
      "type":value,
    };
     传参刷新当前页面数据
    this.getAccounts(params);
  }
这个传参用意体现在接口这里：
// 初始页面数据接口
  getAccounts(condition){
    //  定义上行参数
    let params = {
      "deviceId":"",  //--设备id
      "txHash":"",     //--交易hash
      "status":"",     //--状态
      "sortOrder":"",   //--排序 ascend,descend两种状态
      "sortField":"",   //--排序字段 txStartTime
      "page":1,
      "size":5
    }
     // 判断是否有传参，如果有就走传参进来的数据
    if(condition){
      params = Object.assign({},params,condition)
    }
    // ajax 请求数据
    axios.post('/mgt/deviceManager/transaction',params,{
      //   传输authtoken
      headers:{
        authtoken:window.localStorage.getItem('authtoken')
      }
    }).then((response)=>{
      // 判断数据请求是否成功，成功就获取数据
      if(response.data.code == '0'){
        this.setState({
          accountsList:response.data.data.list,
        })
      }
    })
  }