首先，英语不是我的母语，所以可能会有错误。我开始用钩子做出反应，因为每个人都说它更容易，这里我有 antd 表和一个按钮（bootstrap 5 模式），这个模式包含 6 个按钮（id、标题、名字、姓氏、全选、确认您的选择），我的观点是用户从 ID、头衔、名字、姓氏中进行选择，当用户选择后，他单击“确认您的选择”，然后如果他选择“名字和姓氏”，那么除这两列之外的其他列将被删除/显示：无？然后，如果他想要返回这些列，他可以选择“选择全部或仅选择它们”，然后单击“确认您的选择”。一直在 antd 网站上查找，但他们没有，有什么建议吗？
这是我的代码：
function EventsSection() {
const eventsData = [
{
key: 1,
title: "Bulletproof EP1",
firstName: "james",
lastName: "cordon",
},
];
console.log(eventsData);
return (
<section>
<EventsTable eventsData={eventsData} />
<span
className="material-icons"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
button
</span>
<div
className="modal fade"
id="exampleModal"
// tabIndex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header ">
<h1 className="modal-title " id="exampleModalLabel">
Filter table{" "}
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body ">
<div className="modal-body d-flex flex-column">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
ID{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Title{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
FirstName{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
LastName
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Choose All{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
confirm your selections{" "}
</button>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</section>
);
}
export default EventsSection;const EventsTable = ({ eventsData }) => {
const tableColumns = [
{
title: "ID",
dataIndex: "key",
key: "id",
},
{
title: "Title",
dataIndex: "title",
key: "title",
},
{
title: "FirstName",
dataIndex: "firstName",
key: "firstName",
},
{
title: "LastName",
dataIndex: "lastName",
key: "lastName",
},
];
return (
<Table dataSource={eventsData} columns={tableColumns} pagination={false} />
);
};
export { EventsTable };我已经实现了你想要的代码沙箱 https://codesandbox.io/s/priceless-allen-h7bd6.
我实现了复选框选择而不是按钮选择，感觉更方便。
Demo: 