关于react antd中下拉框联动没有清除上一次选择的内容

最新推荐文章于 2024-03-25 11:02:09 发布

幼儿园最帅yan

最新推荐文章于 2024-03-25 11:02:09 发布

阅读量2.4k

点赞数

分类专栏： react 文章标签： react.js 前端 reactjs

本文链接：https://blog.youkuaiyun.com/richpersion/article/details/122836980

版权

react 专栏收录该内容

3 篇文章

订阅专栏

关于react antd中下拉框联动没有清除上一次选择的内容问题

描述：
在这里插入图片描述
在选择云厂商的时候后面的共享包应该也动态的清除。当选择腾讯的时候共享包是bwp-1t8hnlyu
当换成阿里的时候共享包依然是上一次选择的内容

没有清除上一次的数据
尝试解决：
第一次尝试：
在select中设置他的value值为当前的exampleOption
在这里插入图片描述

在这里插入图片描述
当云厂商改变的时候也确实改变了，但是当进行选中的时候显示异常，这是因为在共享包下还有一个地域联动，地域是根据选中的共享包进行查找的，共享包是一个值，如果

解决：
使用useRef去设置当前from的属性

  const queryFormRef = useRef()

在共享包的onChange事件中

const exampleChange = (value) =>{
    queryFormRef.current.setFieldsValue("要联动的下拉框的name":null})
    streamApi.listAreas(value).then(res =>{
      let result =[]
      res.data.data.forEach(item => {
        let temp = [];
        temp['label'] = item.split("-")[1];;
        temp['value'] = item;
        result.push(temp);
      });
      setAreaOption(result)
    })
  }
  <ProFormSelect style={{width:30}}
                name="example"
                label="共享包"
                onChange={exampleChange}
                options={exampleOption}
                rules={[{ required: true, message: '' }]}
              />