前端 react+antd select二级联动问题√

1、问题
select二级联动时,出现了如下问题
比如省份的二级联动
北京市——北京
山东省——济南、泰安
当选择北京市北京之后,如果再选择山东省时,此时市级单位仍然是北京

2、解决
在省级单位变化的时候,同时设置如下内容,可以清空市级单位的选择
form.setFieldsValue({‘Form.Item的name’: ’ '});

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
antdSelect组件可以通过设置`onSelect`事件和动态改变`options`属性来实现二级联动。 假设我们有以下数据: ```js const options = [ { label: '北京', value: 'bj', children: [ { label: '海淀区', value: 'hd', }, { label: '朝阳区', value: 'cy', }, ], }, { label: '上海', value: 'sh', children: [ { label: '浦东新区', value: 'pd', }, { label: '徐汇区', value: 'xh', }, ], }, ]; ``` 我们需要在Select组件中,选中第一级选项后,动态的更新第二级选项。实现的代码如下: ```jsx import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const options = [ { label: '北京', value: 'bj', children: [ { label: '海淀区', value: 'hd', }, { label: '朝阳区', value: 'cy', }, ], }, { label: '上海', value: 'sh', children: [ { label: '浦东新区', value: 'pd', }, { label: '徐汇区', value: 'xh', }, ], }, ]; function CascadingSelect() { const [cities, setCities] = useState(options[0].children); const handleCityChange = (value) => { const city = options.find((item) => item.value === value); setCities(city.children); }; return ( <div> <Select defaultValue={options[0].value} style={{ width: 120 }} onSelect={handleCityChange}> {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> <Select style={{ width: 120 }} defaultValue={cities[0].value}> {cities.map((city) => ( <Option key={city.value} value={city.value}> {city.label} </Option> ))} </Select> </div> ); } export default CascadingSelect; ``` 在这个例子中,我们在第一个Select组件中设置了`onSelect`事件,当选中北京或上海时,会触发`handleCityChange`函数,动态的更新第二个Select组件中的选项。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ToBeBetterAlice

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值