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,

});

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/51694.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出指南:Netty开发【NIO核心组件】

目录 ​Netty开发【NIO核心组件】 1.NIO基础概念 2.NIO核心组件 2.1.Channel&&Buffer简介 2.2.Selector 服务器的多线程版本 服务器的线程池版本 服务器的selector版本 2.3.Buffer 0.ByteBuffer的正确使用流程 1.ByteBuffer类型简介 2.ByteBuffer核心属性说…

【解惑笔记】树莓派+OpenCV+YOLOv5目标检测(Pytorch框架)

【学习资料】 子豪兄的零基础树莓派教程https://github.com/TommyZihao/ZihaoTutorialOfRaspberryPi/blob/master/%E7%AC%AC2%E8%AE%B2%EF%BC%9A%E6%A0%91%E8%8E%93%E6%B4%BE%E6%96%B0%E6%89%8B%E6%97%A0%E7%97%9B%E5%BC%80%E6%9C%BA%E6%8C%87%E5%8D%97.md#%E7%83%A7%E5%BD%95…

Qt6 Qt Quick UI原型学习QML第七篇

文章目录 效果演示QML语法 ClickableImageV2.qmlQML语法 EasingCurves.qml时钟小球滚动QML 源码## 时钟小球滚动QML解释 语法解释参考动画片动画元素应用动画可点击图像V2上升的物体第一个对象第二个对象第三个对象缓和曲线分组动画并行动画连续动画嵌套动画 效果演示 QML语法 …

orm(连接MySQL,增删改,创建表,样例)

1.启动数据库 mysql -u root -p password:(输入密码)2.创建数据库 create database stu DEFAULT CHARSET utf8 COLLATE utf8_general_ci;3.更改Django中settings.py文件配置 Django连接数据库: DATABASES {default: {ENGINE: django.db.backends.mysql,NAME: st…

一起学算法(插入排序篇)

概念: 插入排序(inertion Sort)一般也被称为直接插入排序,是一种简单的直观的排序算法 工作原理:将待排列元素划分为(已排序)和(未排序)两部分,每次从&…

QT 视图(view)模型(model)汇总

QStringListModel和QListView UI界面 widget头文件 #ifndef WIDGET_H #define WIDGET_H#include <QStringList> #include <QStringListModel> #include <QWidget>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : publi…

认识 springboot 并了解它的创建过程 - 1

前言 本篇介绍什么是SpringBoot, SpringBoot项目如何创建&#xff0c;认识创建SpringBoot项目的目录&#xff0c;了解SpringBoo特点如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录 前言1.什么是springboot?2.为什么…

COMSOL三维Voronoi图泰森多边形3D模型轴压模拟及建模教程

多晶体模型采用三维Voronoi算法生成&#xff0c;试件尺寸为150150300mm棱柱模型&#xff0c;对晶格指定五种不同材料&#xff0c;实现晶格间的差异性。 对试件进行力学模拟&#xff0c;下侧为固定边界&#xff0c;限制z方向的位移&#xff0c;上表面通过给定位移的方式实现轴…

应用开发者的疑问:大模型是银弹吗?

被当成银弹的大模型 ChatGPT 火了之后&#xff0c;大模型似乎被当成了真正的银弹&#xff0c;所有的体验问题都想通过大模型解决&#xff1a; 能不能和大模型对话订机票&#xff1f;自然语言生成 SQL&#xff0c;简化报表分析工作&#xff1f;大模型帮老年人操作软件&#xff…

rpc通信原理浅析

rpc通信原理浅析 rpc(remote procedure call)&#xff0c;即远程过程调用&#xff0c;广泛用于分布式或是异构环境下的通信&#xff0c;数据格式一般采取protobuf。 protobuf&#xff08;protocol buffer&#xff09;是google 的一种数据交换的格式&#xff0c;它独立于平台语…

第2章 逻辑分页、AutoFac注入、工作单元与仓储

1 CoreCms.Net.Model.ViewModels.Basics.IPageList<T> namespace CoreCms.Net.Model.ViewModels.Basics { ///<typeparam name"T">泛型类型实例(1个指定实体的类型实例)。</typeparam> /// <summary> /// 【逻辑分页列表--接口】 /// <…

qt添加图标

1.添加资源 选择QtWidgetsApp.qrc文件打开 添加图标文件路径 添加图标文件 2.按钮添加图标 图标路径为:/res/res/swicth.jpg &#xff08;1&#xff09;代码设置图标 ui.pushButton_OPen->setIcon(QIcon(":/res/res/swicth.jpg")); &#xff08;2&#xff09;属…

MySQL数据库——DQL操作——基本查询

文章目录 前言事前准备——测试数据整表查询指定列查找别名查询MySQL运算符条件查询模糊查询排序查询聚合查询分组查询分组之后的条件筛选 分页查询将整张表的数据插入到另一张表中 前言 MySQL数据库常见的操作是增删查改&#xff0c;而其中数据的查询是使用最多&#xff0c;也…

WormGPT – 网络犯罪分子用来犯罪的人工智能工具

WormGPT – 网络犯罪分子用来发起商业电子邮件泄露攻击的生成式人工智能工具 前言 什么是蠕虫GPT&#xff08;WormGPT&#xff09; WormGPT是基于EleutherAI于2021年创建的大型语言模型GPT-J的AI模型。它具有无限的字符支持、聊天记忆保留和代码格式化功能。 如果未部署适当…

行为型:发布订阅模式

定义   发布订阅模式是基于一个事件&#xff08;主题&#xff09;通道&#xff0c;希望接收通知的对象Subscriber&#xff08;订阅者&#xff09;通过自定义事件订阅主题&#xff0c;被激活事件的对象 Publisher &#xff08;发布者&#xff09;通过发布主题事件的方式通知订…

AI 绘画Stable Diffusion 研究(二)sd模型ControlNet1.1 介绍与安装

部署包作者:秋葉aaaki 免责声明: 本安装包及启动器免费提供 无任何盈利目的 大家好&#xff0c;我是风雨无阻。 众所周知&#xff0c;StableDiffusion 是非常强大的AI绘图工具&#xff0c;需要详细了解StableDiffusion的朋友&#xff0c;可查看我之前的这篇文章&#xff1a; …

深度学习实践——模型部署优化实践

系列实验 深度学习实践——卷积神经网络实践&#xff1a;裂缝识别 深度学习实践——循环神经网络实践 深度学习实践——模型部署优化实践 深度学习实践——模型推理优化练习 源码&#xff1a; 1. 对应的github地址 https://github.com/Asionm/streamlit_demo 2. 对应的gitee地…

fwrite函数

1、函数声明 size_t fwrite( const void *buffer, size_t size, size_t count, FILE *stream ); 2、参数说明 buffer 指向要写入的数据的指针。 size 项大小&#xff08;以字节为单位&#xff09;。 count 要写入的项的最大数量。 stream 指向 FILE 结构的指针。 3、…

【机器学习】Cost Function

Cost Function 1、计算 cost2、cost 函数的直观理解3、cost 可视化总结附录 首先&#xff0c;导入所需的库&#xff1a; import numpy as np %matplotlib widget import matplotlib.pyplot as plt from lab_utils_uni import plt_intuition, plt_stationary, plt_update_onclic…

C# VS2022+WinForm+Oracle19.3+存储过程,SQL和代码分离

【我的目的】&#xff1a;SQL和代码分别存放在不同的地方&#xff0c;便于随时修改SQL的内容&#xff0c;也便于修改SQL的书写格式 方案1&#xff1a;把SQL存放在DataSet.xsd中实现SQL和代码分离 方案2&#xff1a;用存储过程实现SQL和代码分离 我最倾向方案1&#xff0c;利用…