当前位置: 首页 > news >正文

antd中的Cascader级联选择框怎么清空重置React

项目场景:

React项目,使用antd中的Cascader级联选择框


问题描述:

通过其他按钮无法重置选择框中的项


原因分析:(对应解决办法一和二)

1、级联选择框的数据默认是根据options绑定的数组中的value值来进行赋值显示的,可以使用antd中Cascader的value和onChange来进行赋值和更改


注:value选中项是一个数组 

2、具体的搜索模块,直接使用Form表单进行管理,将数据交给表单来控制xxx.current.setFieldsValue({})

解决方案:

一、解决办法1

1、设置一个变量

const [cascaderValue, setCascaderValue] = useState(undefined);

2、使用value保存这个变量,value 值是 options 中 value 值对应级别的数组(也就是选择级联项时调用onChange传递来的参数e),直接赋值给cascaderValue

 3、重置按钮将值设置为undefined

setCascaderValue(undefined)

 

二、解决办法2

使用form表单,结合ref来进行数据的重置清空

formRef.current.setFieldsValue({

      city: [],

      deviceUid: undefined,

});

 

 

http://www.lryc.cn/news/102850.html

相关文章:

  • 复现YOLOv5改进最新MPDIoU:有效和准确的边界盒回归的损失,打败G/E/CIoU,效果明显!!!
  • 低代码在数智化时代中的应用
  • 应用层协议——http
  • element-tree-line el-tree 添加结构线 添加虚线
  • 【Lua学习笔记】Lua进阶——函数和闭包
  • 大学生竞赛管理系统springboot比赛报名信息java jsp源代码mysql
  • UnixBench 5.1.3 银河麒麟桌面操作系统V10 (SP1) ARM64 aarch64 图形性能测试 2d 3d, glmark2 3d测试
  • JavaScript高级——ES6基础入门
  • 2023年超越期待的高性能视频剪辑主机推荐| Intel 蝰蛇峡谷测评
  • 1400*A. Factory
  • OpenHarmony开源鸿蒙学习入门 - 基于3.2Release 应用开发环境安装
  • Linux 查看服务器内存、CPU、网络等占用情况的命令
  • 调用webservice导excel文件内容进入数据库
  • *CTF 2023 web jwt2struts 题解wp
  • 使用java实时获取手环、手表的健康数据
  • Maven右侧依赖Dependencies消失
  • 100% RNN language model ChatRWKV 相关开源项目
  • ElasticSearch Window Linux部署
  • MyBatis-Plus 分页插件实现分页查询
  • Nacos源码 (1) 源码编译及idea环境
  • docker配置文件挂载(容器数据管理)
  • uniAPP 视频图片预览组件
  • 【论文阅读】The Deep Learning Compiler: A Comprehensive Survey
  • 怎么维护自己的电脑?
  • day52|● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组
  • uniapp,vue3路由传递接收参数
  • SkyEye与Jenkins的DevOps持续集成解决方案
  • HCIE Security——防火墙互联技术
  • Rust- 闭包
  • 【数据挖掘torch】 基于LSTM电力系统负荷预测分析(Python代码实现)