如何在React+Ant Design的Table组件中实现Switch开关的动态状态切换

在使用React和Ant Design开发应用程序时，我们经常需要在Table组件中添加Switch开关，以便用户可以动态更改某些列的状态。下面是一个简单的示例，演示如何在Table组件中使用Switch开关，并在状态改变时将新状态传递给父组件。
首先，确保你已经安装了React和Ant Design的相关依赖。你可以使用npm或yarn进行安装。

npm install react antd

接下来，创建一个名为SwitchTable.js的新文件，并在其中编写以下代码：

import React, { useState } from 'react';
import { Table, Switch } from 'antd';
const dataSource = [
{ id: 1, name: 'John Doe', switchStatus: false },
{ id: 2, name: 'Jane Smith', switchStatus: true },
{ id: 3, name: 'Bob Johnson', switchStatus: false },
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Switch Status',
dataIndex: 'switchStatus',
key: 'switchStatus',
render: (text, record) => (
<Switch checked={text} onChange={handleSwitchChange(record.id)} />
),
},
];
const SwitchTable = () => {
const [state, setState] = useState({ switchStatuses: {} });
const handleSwitchChange = (id) => (checked) => {
// 将新的状态保存到状态对象中
const newState = { ...state, switchStatuses: { ...state.switchStatuses, [id]: checked } };
// 更新状态对象并传递给父组件
setState(newState);
};
return (
<Table dataSource={dataSource} columns={columns} />
);
};
export default SwitchTable;

在上面的代码中，我们首先导入了React和Ant Design的相关组件。然后，我们定义了一个名为dataSource的数组，其中包含了一些示例数据。接下来，我们定义了一个名为columns的数组，其中包含了我们想要在Table组件中显示的列。在这个例子中，我们有两个列：一个显示名字（name），另一个显示Switch开关的状态（switchStatus）。我们使用render属性来自定义了第二列的渲染方式，并将每个开关的状态与对应行的记录关联起来。最后，我们在每个开关的onChange事件中调用了一个名为handleSwitchChange的函数，该函数接受一个参数（行的ID），并在状态改变时更新状态对象。在函数内部，我们将新的状态对象合并到当前的状态对象中，并使用setState函数将新状态传递给父组件。这样，当用户切换开关时，新的状态将自动更新并传递给父组件。你可以根据需要修改数据源和列的定义来适应你的应用程序的具体需求。