我要评论##用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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论