如何解决如何将 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) => ({
}),};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。