简单的用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有点上头。。。。

你可能感兴趣的:(antd)