如何使用选择选项同步 antd 多选表复选框状态

Question

我有 antd 多行可选表，每行都有一个选择选项。当我点击一个复选框时，该行应该被选中，并且 select 的默认值应该更改为“Active”。当我取消选中该复选框时，该行不应被选中，并且 select 的默认值应更改为“非活动”。 同样，当我将选项选择为活动时，该行的复选框应该被勾选。并且当我将选项设置为 Inactive 复选框时，应该取消勾选。

有人知道如何实现吗？

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) => ({
    
      
    }),
  };