antd Select 使用动态数据渲染选择项

2021年 11月30 日 晴

今天的天气比较好，星期天，也没有出去，最近在学习react，我也不知道学习这个有什么样的作用，其实我现在的工作是比较偏重于后端以及服务器相关的东西，但是总是想做个比较好的网站，有点实际的内容，网站做了很多次，但是整体上总是让我不那么满意，没人访问，而且之前使用的html 里面很多的js代码，看起来总感觉乱糟糟的。好了，不说那么多了，我们来看今天要实现的功能，在antd的组件中有Select这个组件：

 这个Select选择器，那么我用到了这样的一个选择器，我把选择作为我搜素的条件，并且选择项目的内容从后台获取到。

 是否为根模块，有两个选择项，是和否，我们希望这个数据在页面刚开始加载的时候可以从后台接口中获取，并且渲染到Select上去

1.我们什么时候来调用后台的接口

2.调用后台的接口返回什么样的数据

3.根据数据我们如何渲染到Select 的选择项

上面三个问题，就是我们即将要解决的问题，当然解决了上面三个问题，这个功能也就实现了

接口已经编写好，现在我们需要调用：，这个是接口返回的内容：

 根据React 生命周期，我们肯定是在页面渲染之前进行调用：

componentDidMount(){
    this.getOptions("1001")
    }
  getOptions=(itemorder)=>{
    Axios.post('/api/codeitem/getitembyorder',{"itemorder":itemorder}).then(res=>{
      if(res.data.code==='0000'){
        this.setState({
           options:res.data.data
        })
      }
    })  
  }

获取到数据之后，我们需要把数据渲染到页面上：

<Select style={{ width: 180 }}  placeholder="请选择是否为根节点">
      { this.state.options.map((item)=>
           <Option value={item.value}>{item.text}</Option>
       )}
  </Select>

然后我们来查询效果：

 哈哈，果然实现了

但是还有一个问题，页面加载之后，我们只有两个选择项目了，不能同时查看了，那么我们需要给Select 组件增加一个清除按钮：

<Select style={{ width: 180 }} allowClear={true} placeholder="请选择是否为根节点">
      { this.state.options.map((item)=>
          <Option value={item.value}>{item.text}</Option>
      )}
  </Select>

 上面实现了

其实这个地方为什么要单独的拿出来记一下

这个也实现我们从后台返回数组，将数据渲染为元素，利用到的 map 这个循环

希望对你有所帮助