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

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

1. 首先看state内的值

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

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

 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循环和三元判断，动态生成一级下拉框（代码如下：）

 <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内， 依次类推（当然你得有个后台~~）

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）

<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有点上头。。。。

本文地址：https://blog.csdn.net/alonesupermen/article/details/107354125