[前端]用React+antd实现简单Select 下拉多级联动；

##**用React+antd实现简单Select 下拉多级联动；**


 **1. 首先看state内的值**
 


```javascript
 this.state = {
            select:[] , //1级下拉内容
            select2:[], // 2级下拉内容
            status:true, //2级禁用状态
            select3:[],  //3级下拉内容
            select4:[],  //4级下拉内容
          }
```


 
 **2. -利用 componentWillMount生命周期向后台发起第一个select请求(代码如下)：**


```javascript
 componentWillMount() {
        // Axios请求
        // 下拉框请求
        Axios.post("api/user/selectAllType",{
        
        })
            .then((res)=>{
                console.log('下拉',res.data)
            this.setState({
                select:res.data.data
                //放到select里
            })
        }).catch(function (err) {
            console.log(err)
        })
    }


```
*这里将后台请求回来的内容放在在定义的state内，每次请求回来的数据都放在定义的state内*


 **3. **然后同过map循环和三元判断，动态生成一级下拉框（代码如下：）****


```javascript <select defaultvalue=" " onchange="{this.First.bind(this)}"> <option value=" ">请选择</option>
         {
         this.state.select ? this.state.select.map((item)=>(
         <option key="{item.type_id}" value="{item.type_id}">{item.type_name}</option>      
          )):<option value="">无</option>  
                            } </select> ```
*这里有个点注意一下，当后台没有数据时，我们需要判断state的内容，这里的判断不能写.length（页面会报错）这里我的后台回给我的是null，假如没有数据就会跳过map循环显示后面的无。*
 **4. 通过onchange事件监听一级下拉框value的值，向后台发起2次请求，将请求回来的数据放在state里select2内， 依次类推（当然你得有个后台~~）**


```javascript
First(value){
        console.log('一级',value);
        this.setState({
          select1:value
        })


      
          Axios({
            url:`api/user/selectCourseInfoByTypeId?type_id=${value}`,
            method:'post',
            data: {
            },
            headers: {
                'Content-Type': 'application/json'
            }
          })
              .then((res)=>{
                  console.log('下拉2',res.data)
                  if(res.data.data===null){
                    message.error('没有数据！')
                  }
              this.setState({
                  select2:res.data.data
                  status:false
              })
          }).catch(function (err) {
              console.log(err)
          })


```
 **5. 2级下拉框代码如下：**
 *通过绑定禁用状态，来进一步防止暴力用户（原理是axios请求数据成功后改变state中status为true）*


```javascript
<Select  
 //绑定禁用状态
     disabled={this.state.status}                      
     defaultValue=" "
     onChange={this.select2.bind(this)}>
     <option value=" ">请选择</option>
     {
      this.state.select2 ? this.state.select2.map((item)=>(
      <option key="{item.course_id}" value="{item.course_id}">{item.course_name}</option>      
       )) : <option value="">无</option>  
       } </select> ```


> 三级四级下拉框依次像这样往后写，这个是比较笨的办法，至于为啥不用antd里的Cascader级联选择，emmm有点上头。。。。