如何使用 select 选项同步 antd 多个 select table 复选框状态

Question

我有 antd 多行 selectable table 并且每一行都有一个 select 选项。当我单击一个复选框时，该行应该得到 selected 并且 select 的默认值应该更改为“Active”。当我取消选中复选框时，该行不应得到 selected，select 的默认值应更改为“Inactive”。同样，当我 select 选项为活动时，应该勾选该行的复选框。当我给出选项时，应取消选中“不活动”复选框。

有人知道如何实现吗？

const columns = [
{
      title: "name",
      dataIndex: "name",
      key: "name",
    },
{
      title: "status",
      dataIndex: "status",
      key: "status",
      render: (text: any, record: any) => {
        return (
          <Select  style={{ width: 120 }} >
            <Option value="Active">Active</Option>
            <Option value="Inactive">Inactive</Option>
          </Select>
        );
      },
    },
]

const dataSource = [
 {
      key: "1",
      name: "Mike",
      status: null,
    },
{
      key: "2",
      name: "jane",
      status: null,
    },
]

const rowSelection = { 
     onChange: (selectedRowKeys: any, selectedRows: any) => {
      console.log("selectedRows ",selectedRows)
      console.log("selectedRows ",selectedRowKeys)
      },
    getCheckboxProps: (record: any) => ({
    
      
    }),
  };

return(
<Table
        columns={columns}
        rowSelection={{ type: "checkbox", ...rowSelection }}
        dataSource={dataSource}
      />
)

Answer 1

您应该为 Select 组件使用状态值。

const [selectedValues, setSelectedValues] = useState(null);

<Select  style={{ width: 120 }} value={selectedValues.find(/*write find function that will based on key of record*/) ? "Active" : "Inactive"} >
            <Option value="Active">Active</Option>
            <Option value="Inactive">Inactive</Option>
          </Select>


const rowSelection = { 
     onChange: (selectedRowKeys: any, selectedRows: any) => {
      console.log("selectedRows ",selectedRows)
      console.log("selectedRows ",selectedRowKeys)

      setSelectedValues(selectedRows);
      },
    getCheckboxProps: (record: any) => ({
    
      
    }),
  };

如何使用 select 选项同步 antd 多个 select table 复选框状态

how to sync the antd multiple select table checkbox state with a select option

javascript

reactjs

typescript

antd

multipleselection