带有开关组件的 antd 表答案

【问题标题】：antd Table with switch component带有开关组件的 antd 表
【发布时间】：2021-08-05 14:07:41
【问题描述】：

ant设计表中切换开关是否可以获取行信息？

【问题讨论】：

标签： antd

【解决方案1】：

是的，渲染函数的第二个参数是记录。你可以这样做

{
  title: 'switch',
  dataIndex: 'age',
  key: 'age',
    render: (e, record) => (< Switch onChange={() => handleSwitchChange(record)} defaultChecked={e} />)
}

【讨论】：

我不会得到开关当前值，我需要开关当前值和行记录。 codesandbox.io/s/lr0jmywzqq
你已经有switch onChange了，不如onChange={(switchValue) => handleSwitchChange(record, switchValue)codesandbox.io/s/7mpon77220

【解决方案2】：

这就是我在使用 Ant 设计时处理每个行项上的开关组件的方式。也许这可以给你一些提示。

表格列

const COLUMN =
     {
          title: 'Status',
          key: 'status',
          dataIndex: 'status',
          // status is the data from api 
          // index is the table index which could be used to get corresponding data
          render: (status, record, index) => {
            const onToggle = (checked) => {
              status = checked;
              onActiveUser(index, status);
            };
            return (
              <Space>
                <Switch defaultChecked={status} onChange={onToggle} />
              </Space>
            );
          },
        },

   const onActiveUser = (index, status) => {
        axios.patch({ id: users[index].id }, { is_active: status })
          .then((response) => {
            console.log(response);
          })
          .catch(() => {
            console.log('Failed!');
          });
      };

【讨论】：