下拉框的动态添加和静态写法

来来来,今天来总结一波。
写后台操作系统很常见的就是会遇到下拉选择框,虽然现在都可以用组件,但是数据毕竟需要自己写,获取的方式也是各种各样,多掌握几种总是好的,避免万一出问题束手无策。
之所以写下这篇总结,是因为我最初因为一个不确定的长度用了一个洋气的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,
        })
      }
    })
  }

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    爱运动爱学习阅读 15,421评论 3 114
  • 一群人在找工作,谁都希望找个好工作, 今天不努力工作,明天努力找工作。 在网上有个女孩一直在发朋友动态, 看她找了...
    伏魔战神阅读 210评论 0 1
  • 读书笔记:NOSQL 菜鸟教程 定义 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQ...
    石头的书桌阅读 1,445评论 0 0
  • 姚家园的小伙伴们明天就要开盘大卖了,我都好激动~~ 勇哥的万能胶身体,其实都是汗水
    SyoCga阅读 168评论 0 0