如何将antd多选表复选框状态与select选项同步

Question

我有一个多行可选表，每行都有一个选择选项。并且当我点击复选框时，该行应该被选中并且select的默认值应该变为"0"；"活动"；。当我取消选中复选框时，该行不应被选中，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) => ({


}),
};