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

react+antd+Table里切换Switch改变状态onChange 传参

场景:table列表里面,操作用Switch切换状态。对应列改变

  1. 操作在colums里面

 // 表格行const colums: ColumnsType<potentialType> = [{title: useLocale('创建时间'),dataIndex: 'creation_date',key: 'creation_date',align: 'center',render: (v: string, record: { creation_date: string }) => {return (<span>{record?.creation_date ? formatMonent(record.creation_date) : '-'}</span>);},},{title: useLocale('更新时间'),key: 'update_date',dataIndex: 'update_date',align: 'center',render: (v: string, record: { creation_date: string }) => {return (<span>{record?.creation_date ? formatMonent(record.creation_date) : '-'}</span>);},},{title: useLocale('状态'),key: 'is_contact',dataIndex: 'is_contact',align: 'center',render: (record: any) => (<span>{!record ? CONTACT_STATUS.NOTCONTACTED : CONTACT_STATUS.CONTACTED}</span>),},{title: '操作',dataIndex: 'action',key: 'action',align: 'center',render: (text: any, record: any, index: any) => {return (<Switch checkedChildren={useLocale("已联系")}unCheckedChildren={useLocale("未联系")}key={record.is_contact}defaultChecked={record.is_contact}onChange={(checked)=>handleContactChange(record,checked)}/>)}},];
  1. handleContactChange 切换方法:

 const handleContactChange = (record:any,checked:any) => {const params={id:record?.id,is_contact: checked}getClientRegister(params).then((data: any) => {if(data.results){message.success(data.msg);fetchcasualList({ ...listParams});}})   };
  1. 引用

 return (<><Card><Content><Form form={form} wrapperCol={{ span: 3, offset: 12 }}><TabledataSource={casualList?.results || []}columns={columns}loading={loading}pagination={handlePagination}rowKey='id'/></Form></Content></Card></>)

重点讲一下Switch里面onChange方法,传参的时候,自定义的参数,一定要用回调的方式。如果传参传的参数是本身有的,比如checked,就直接写:

antd官网https://ant.design/components/switch-cn#api

其次:选中Switch,根据刚进列表,Switch就根据请求的数据来显示开关,可以设置属性defaultChecked

注意这里defaultChecked不能写死,因为写死之后点击按钮时无法切换的。所以此处设置了key。key={record.is_contact}

记得请求结束后刷新列表,重新发起列表请求。

ok,这样解决列表问题。

js传参参考:https://blog.csdn.net/mChales_Liu/article/details/112558081

传参原理:https://www.cnblogs.com/xcsn/p/9158727.html

相关文章:

react+antd+Table里切换Switch改变状态onChange 传参

场景&#xff1a;table列表里面&#xff0c;操作用Switch切换状态。对应列改变操作在colums里面// 表格行const colums: ColumnsType<potentialType> [{title: useLocale(创建时间),dataIndex: creation_date,key: creation_date,align: center,render: (v: string, rec…...

《底层逻辑:看清这个世界的底牌》读后感

书名《底层逻辑&#xff1a;看清这个世界的底牌》作者刘润简介如果只教给你各行各业的“干货”&#xff08;方法论&#xff09;&#xff0c;那只是“授人以鱼”&#xff0c;一旦环境出现任何变化&#xff0c;“干货”就不再适用。但如果教给你的是底层逻辑&#xff0c;那就是“…...

【2023】Prometheus-Blackbox_exporter使用

目录1.下载及安装blackbox_exporter2.修改配置文件设置监控内容2.1.使用http方式作为探测3.与prometheus集成4.导入blackbox仪表盘进行观测1.下载及安装blackbox_exporter 下载安装包 wget https://github.com/prometheus/blackbox_exporter/releases/download/v0.23.0/black…...

嵌入式Linux学习经典书籍-学完你就是高手

很多刚入门的朋友一直都有人问我要学习资料&#xff0c;嵌入式实在太杂&#xff0c;网上很多人写的太不负责了&#xff0c;本书单综合了本人以及一些朋友多年的经验整理而成。 本人见识和阅读量有限&#xff0c;本书单可能有不对的地方&#xff0c;欢迎朋友指正&#xff0c;交…...

网络基础-基础网络命令

文章目录路由命令查询添加路由1.添加访问某台主机的静态路由2.添加访问某个网络的静态路由3.添加默认网关&#xff1a;删除设计关键字路由2参考路由 命令查询 通过 route --help 或man route 查询 添加路由 1.添加访问某台主机的静态路由 route add -host [目标主机IP地址…...

域对象共享数据

处理请求的过程&#xff1a;获取请求参数&#xff0c;调用service处理业务逻辑&#xff0c;往域对象中共享数据&#xff0c;最后实现渲染页面跳转。请求域中共享数据ModelAndView向request域对象共享数据ModelAndView&#xff1a;往域对象共享数据&#xff0c;并实现页面跳转和…...

【基于jeeSite框架】SpringBoot+poi+Layui自定义列表导出

文章目录功能效果思路代码前台后台easyPoi,easyExcel&#xff0c;poi三者的区别poipoi依赖导出ExcelHSSF方式导出XSSF方式导出SXSSF方式导出导入excelHSSF方式导入XSSF方式导入SXSSF方式导入easyPoi依赖包采用注解导出导入easyExcel依赖采用注解导出导入API文档easyPoi操作文档…...

使用 RGB 值设置颜色

使用 RGB 值设置颜色 另一种可以在 CSS 中表示颜色的方法是使用 RGB 值。 RGB 即红色、绿色、蓝色&#xff08;英语&#xff1a;Red, Green, Blue&#xff09;。 ● 红色&#xff08;R&#xff09;0 到 255 间的整数&#xff0c;代表颜色中的红色成分。。 ● 绿色&#xff08;G…...

【python学习笔记】:5个高效编程技巧

01 交换变量​​​​​​​ >>>a3 >>>b6 这个情况如果要交换变量在c中&#xff0c;肯定需要一个空变量。但是python不需要&#xff0c;只需一行&#xff0c;大家看清楚了​​​​​​​ >>>a,bb,a >>>print(a)>>>6 >>&g…...

IP多播技术详解

文章目录前言IP多播技术的相关基本概念IP多播地址和多播组在局域网上进行硬件多播IP多播地址和多播MAC地址映射关系在因特网上进行IP多播网际组管理协议IGMP多播路由选择协议前言 随着计算机网络的发展和个人计算机的普及&#xff0c;人们能够方便的在网络上畅游&#xff0c;进…...

华为OD机试真题Python实现【数组排序】真题+解题思路+代码(20222023)

🔥系列专栏 华为OD机试(Python)真题目录汇总华为OD机试(JAVA)真题目录汇总华为OD机试(C++)真题目录汇总华为OD机试(JavaScript)真题目录汇总文章目录 🔥系列专栏题目输入输出示例一输入输出解题思路核心知识点Python 代码实现代码运行结果版权说明</...

丹麦市政当局通过 NetIQ 身份和访问管理解决方案,提高安全合规性

丹麦市政当局通过 NetIQ 身份和访问管理解决方案&#xff0c;提高安全合规性 概览 公司&#xff1a;普华永道 行业&#xff1a;咨询 地点&#xff1a;丹麦 挑战 创建一个通用框架&#xff0c;以便丹麦市政当局可以无需内部专业知识的前提下利用高级身份和访问管理 使用的…...

内网渗透学习官方文档

内网渗透0x00 kerberos协议0x01 ntlm协议0x02 管道0x03 smb协议0x04 windows访问控制0x05 令牌窃取0x06 SPN扫描&kerberoast0x07 黄金票据0x08 白银票据0x09 MS140680x10 NTDS.DIT && sam0x11 NTLM Relay0x12 MS08-0680x13 CVE-2019-13840x00 kerberos协议 kerber…...

如何编写接口测试用例?

接口测试用例如何编写&#xff1f;下面简单给大家讲解一下。 接口测试用例是目前软件开发中不可或缺的一个重要部分&#xff0c;因此编写接口测试用例同样重要。 接口测试用例的作用非常明显&#xff0c;它能够帮助我们了解产品正在考验、调整它如何表现在特定情境之下、产品是…...

代码随想录算法训练营第44天 || 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ

代码随想录算法训练营第44天 || 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ 完全背包 完全背包与01背包的区别在于每种物品都有无限件&#xff0c;可以多次放入背包。 我们回顾一下01背包的遍历顺序&#xff0c;其中内层遍历背包的过程要后序遍历&#xff0c;为什么…...

【Bug】SQL无法绑定由多个部分组成的标识符

文章目录问题原因解决拓展问题 执行sql报&#xff1a;无法绑定由多个部分组成的标识符 原因 取了别名却没用别名&#xff0c;如下面这些情况 select * from biz_production_order_work_detail temp where biz_production_order_work_detail.create_time>2023-02-13selec…...

Games102 学习笔记

Games 102 P2 数据拟合 拟合数据的好坏 分段线性插值函数yf1(x)yf_1(x)yf1​(x)&#xff0c;数据误差为0&#xff0c;只有C0C_0C0​连续。光滑插值函数yf2(x)yf_2(x)yf2​(x)&#xff0c;数据误差为0&#xff0c;可能被Noice带歪&#xff0c;导致函数性质不好&#xff0c;预…...

知识图谱基本知识点以及应用场景

近两年来&#xff0c;随着Linking Open Data等项目的全面展开&#xff0c;语义Web数据源的数量激增&#xff0c;大量RDF数据被发布。互联网正从仅包含网页和网页之间超链接的文档万维网(Document Web)转变成包含大量描述各种实体和实体之间丰富关系的数据万维网(Data Web)。在这…...

IDEA中常用的快捷键

IDEA中常用的快捷键 自动修正&#xff1a;ALT回车键 代码格式化&#xff1a;CTRLALTL 代码提示&#xff1a;CTRLALT空格 导入当前代码所需要的类&#xff1a;alt回车键 导入当前类中所需要的所有类&#xff1a;ctrlshifto 查看子类&#xff1a;ctrlh 查找类&#xff1a;ctrln …...

朗润国际期货招商:桥水基金四季度投资组合

桥水基金四季度投资组合 总持仓市值183.2亿美元&#xff1b;环比减少7.3% ishares标普500指数ETF&#xff1a;7.93亿占持仓4.33%环比1.14%宝洁&#xff1a;7.57亿占持仓4.13%环比-0.1%新兴市场core TEF-ishares&#xff1a;6.80亿占持仓3.71%环比0.47%强生&#xff1a;6.3亿占…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...