开关功能在管理后台中经常被使用到，通过switch的使用可以便捷、快速的知道当前状态等情况。

那么关于switch的状态和参数的传递要如何实现呢？

文中就来介绍在react中使用antdeaign的switch如何实现参数传递及当前switch的开关状态。

import { useState,useEffect,useRef } from "react";
import React from 'react'
import { Switch,Table } from "antd";
export default function overviewPage() {
  const defaultColumns = [
  	{
  	  title: 'ID',
  	  dataIndex: 'id',
  	},
  	{ title: '状态', dataIndex: 'status', align:'center',width:100,
  	  render: (text: any, record: any) => <Switch onChange={(checked) => onChangeStatus(record,checked)} checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={(record.status==1?true:false)}/>
  	},
  ];
  const tableData = [
  	{id:1,status:1,name:'test'},
  	{id:2,status:0,name:'test1'}
  ]
  const onChangeStatus = (data,status) => {
  	console.log('传递的参数',data)
  	console.log('当前状态true或false:',status)
  }
  return (
    <div className="base_page">
		<Table
			bordered
			dataSource={tableData}
			columns={defaultColumns}
			pagination={false}
		/>
    </div>
  );
}

上述代码介绍在table中render使用Switch的方式。