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

2023-11-16

项目场景:

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,

});

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 微信小程序实现视频号跳转

    三种类型 1 跳转到视频号主页 wx openChannelsUserProfile finderUserName 视频号id 2 跳转到视频号视频 wx openChannelsActivity feedId 视频id finderUse
  • 文件上传-图片webshell上传

    图片webshell制作 在服务器端的PHP代码中 对于用户上传的文件做文件类型检查 查看文件格式是否符合上传规范 可以检查文件二进制格式的前几个字节 从而判断文件类型是否正确 针对这种情况可以直接新建要给1 jpg 其中代码内容如下 GI
  • 【数据结构】 二叉树面试题讲解->壹

    文章目录 引言 相同的树 https leetcode cn problems same tree description 题目描述 示例 示例一 示例二 示例三 题目解析 代码实现 另一棵树的子树 https leetcode cn pr

随机推荐

  • 华为OD机试-找出重复代码-2022Q4 A卷-Py/Java/JS

    小明负责维护项目下的代码 需要查找出重复代码 用以支撑后续的代码优化 请你帮助小明找出重复的代码 重复代码查找方法 以字符串形式给出两行代码 字符审长度1 lt length lt 100 由英文字母 数字和空格组成 找出两行代码中的最长公
  • 深度学习之感知器的python实现,及用感知器实现鸢尾花的分类

    机器学习一般用来处理结构化的数据 深度学习一般用来处理非结构化的数据 例如图像 视频 文字等 权重更新过程 如果真实是1 预测是0 则权重会增加 相当于为了达到阈值增加权重 如果真实是0 预测是1 则权重会降低 相当于为了达到阈值减少权重
  • 玩客云通过openwrt作为旁路由

    前置条件 玩客云安装 docker 安装 OpenWrt 这边又两套方案可供选择 下面是具体教程的链接镜像一 https www right com cn forum thread 8024126 1 1 html镜像二 https hub
  • 在Idea中调试ant应用

    Ant调试 Ant调试 ant 是一种非常方便的打包 部署的工具 通过ant 可以一键构建整个项目 虽然MVN也支持这种功能 但是MVN混杂了package管理的功能 并且不是很自由 学习成本比较高 通常 我们调试ant构成的程序 是通过远
  • 零散算法

    1 字符串匹配 朴素的串匹配算法 KMP匹配算法 2 广度优先搜索BFS 3 深度优先搜索DFS 4 狄克斯特拉算法Dijkstra 5 贪婪算法 6 动态规划 7 安全散列算法SHA 用递归分析问题 基于循环写代码 10 关于查找算法 1
  • unity+射线检测

    private Camera aRCamera Ray ray RaycastHit hit aRCamera GameObject Find RenderCamera GetComponent
  • JavaScript节流与防抖

    一 节流 概念 在规定的间隔时间范围内不会重复触发回调 只有大于这个时间间隔才会触发回调 把频繁触发变为少量触发 类似于技能CD 应用 点击按钮 轮播图点击左右箭头 插件lodash js 它里面封装了函数的防抖与节流业务 p 计数器 sp
  • 抓包工具篇|Charles

    1 简介 Charles 是在 Mac 下常用的网络封包截取工具 在做 移动开发时 我们为了调试与服务器端的网络通讯协议 常常需要截取网络封包来分析 Charles 是收费软件 可以免费试用 30 天 试用期过后 未付费的用户仍然可以继续使
  • 怎样使用BAT脚本实现自动按键盘的某个键

    批处理是不行的 用VBS 很简单 例子如下 Set objShell CreateObject Wscript Shell do WScript Sleep 3000 objShell SendKeys F5 WScript Sleep 3
  • Weblogic 12c 集群部署和session复制

    在上一篇Weblogic12c集群搭建的基础上 这一篇介绍Weblogic12c集群应用的部署和session复制 1 启动服务 首先在weblogic12c控制台 启动受托管服务server1 server2 server3 2 将要部署
  • 前端实现微信支付(H5,微信小程序)

    一 微信支付 H5 微信小程序 通常一些电商项目使用到微信支付操作 所以简单地介绍一下微信支付的具体流程 1 1 什么是微信支付 在什么业务场景会使用到微信支付 微信支付是微信内置微信浏览器 其他浏览器不支持 或者微信小程序的支付接口 主要
  • ubuntu如何修改首次登入不是anaconda的base环境

    ubuntu安装anaconda后 每次用户登录进去后所在环境都是anaconda的base虚拟环境 如果用户不想一开始登进去就是anaconda的base环境 想在需要使用anaconda时再激活anaconda环境 输入下面的命令就可以
  • 在Flutter里面构建布局

    https flutter io tutorials layout 可以学到 Flutter的布局机制 如何水平与垂直布局控件 如何构建一个Flutter布局 布局的效果图 https flutter io tutorials layout
  • 西山小菜鸟之Scrapy学习笔记---splash简介

    前言 本文主要介绍scrapy splash的理论知识 文中如有不正确的地方望大家指正 本文的主要内容出自书 精通Scrapy网络爬虫 虫术 Python绝技 背景 近几年随着前端技术和手机端App的飞速发展 互联网架构也发生了巨大的变化
  • 经典兔子问题python(头歌教学实践平台)

    第1关 经典兔子问题 递归 任务描述 问题 有一对兔子 从出生后的第三个月起 每个月都生一对兔子 小兔子再长三个月后每个月又生一对兔子 假如兔子都不死 请问每个月的兔子的数量是多少对 本关任务 编写程序求解上面的问题 相关知识 兔子问题的分
  • java——集合框架

    文章目录 接口 实现 类 算法 1 排序算法 2 查找算法 3 拷贝算法 4 填充算法 5 比较算法 6 随机算法 7 迭代器算法 8 交集 并集 差集 9 分割集合 10 数组和集合的互转 集合框架是一个用来代表和操纵集合的统一架构 所有
  • EFSM(事件驱动型有限状态机:Event Finite State Machine)

    一 介绍 EFSM event finite state machine 事件驱动型有限状态机 是一个基于事件驱动的有限状态机 主要应用于嵌入式设备的软件系统中 EFSM的设计原则是 简单 EFSM的使用者只需要关心 当事件到来时 通过EF
  • 手撸算法-最大子数组和-牛客

    描述 给定一个数组arr 返回子数组的最大累加和 例如 arr 1 2 3 5 2 6 1 所有子数组中 3 5 2 6 可以累加出最大的和12 所以返回 题目保证没有全为负数的数据 要求 时间复杂度为O n O n 空间复杂度为O 1 O
  • css如何让块无间隙,CSS 去掉inline-block间隙的几种方法

    最近做移动端页面时 经常会用到inline block元素来布局 但无可避免都会遇到一个问题 就是inline block元素之间的间隙 这些间隙会导致一些布局上的问题 需要把间隙去掉 对于inline block元素及去掉间隙的方法 在这
  • antd中的Cascader级联选择框怎么清空重置React

    项目场景 React项目 使用antd中的Cascader级联选择框 问题描述 通过其他按钮无法重置选择框中的项 原因分析 对应解决办法一和二 1 级联选择框的数据默认是根据options绑定的数组中的value值来进行赋值显示的 可以使用