当前位置: 首页 > 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

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

相关文章:

  • 《底层逻辑:看清这个世界的底牌》读后感
  • 【2023】Prometheus-Blackbox_exporter使用
  • 嵌入式Linux学习经典书籍-学完你就是高手
  • 网络基础-基础网络命令
  • 域对象共享数据
  • 【基于jeeSite框架】SpringBoot+poi+Layui自定义列表导出
  • 使用 RGB 值设置颜色
  • 【python学习笔记】:5个高效编程技巧
  • IP多播技术详解
  • 华为OD机试真题Python实现【数组排序】真题+解题思路+代码(20222023)
  • 丹麦市政当局通过 NetIQ 身份和访问管理解决方案,提高安全合规性
  • 内网渗透学习官方文档
  • 如何编写接口测试用例?
  • 代码随想录算法训练营第44天 || 完全背包 || 518. 零钱兑换 II || 377. 组合总和 Ⅳ
  • 【Bug】SQL无法绑定由多个部分组成的标识符
  • Games102 学习笔记
  • 知识图谱基本知识点以及应用场景
  • IDEA中常用的快捷键
  • 朗润国际期货招商:桥水基金四季度投资组合
  • Linux管道命令(pipe)全
  • mybatis条件构造器(一)
  • 车联网之电子围栏中ConnectStreamed应用【二十】
  • 临时文件tempfile
  • vue3封装数值动态递增组件
  • JavaWeb_RequestResponse
  • C语言刷题——“C”
  • 【刷题】搜索——BFS:城堡问题(The Castle)
  • 深度学习——torch相关函数用法解析
  • ubuntu 20使用kubeadm安装k8s 1.26
  • 低代码开发平台|制造管理-生产过程管理搭建指南