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

问题描述

我有 antd 多行可选表，并且每行都有一个选择选项。当我单击复选框时，应选中该行，并且 select 的默认值应更改为“活动”。当我取消选中该复选框时，不应选择该行，并且 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",]

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}
      />
)

解决方法

您应该为 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) => ({
    
      
    }),};