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

Posted 2023-03-24

【中文标题】如何使用选择选项同步 antd 多选表复选框状态

【英文标题】：how to sync the antd multiple select table checkbox state with a select option

【发布时间】：2021-09-23 06:41:30

【问题描述】：

我有 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
      />
)

【参考方案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) => (
    
      
    ),
  ;

【讨论】：

嗨，当我在选择下拉列表中选择一个选项时，您知道如何勾选或取消勾选表格中的复选框。