按标题名称过滤表列

Question

新的反应钩子开发人员在这里，在这里我试图实现这可以在图片中看到的内容，但是现在我只有一个复选框，而不是那些按钮，当用户单击复选框并在其下单击确认时，应删除/隐藏其他列除了已检查的那些，如果用户想要返回其他列，他应该转到模态并单击“选择全部或逐一单击”，这里我的名字有问题，有什么建议吗？

import React, { useState, useContext } from "react";
import EventsTable from "./EventTable";
const EventsSection = (events) => {
  const [columns, setColumns] = useState(events);
  const [options, setOptions] = useState({});
  const [modal, setModal] = useState(false);

  const updateTable = (options) => {
    // handle options logic here
    const selectedColumns = [
      {
        title: "ID",
        dataIndex: "key",
        key: "id",
      },
      {
        title: "Title",
        dataIndex: "title",
        key: "title",
      },
      {
        title: "FirstName",
        dataIndex: "firstName",
        key: "firstName",
      },
      {
        title: "LastName",
        dataIndex: "lastName",
        key: "lastName",
      },
    ];
    setColumns(selectedColumns);
  };
  console.log(columns);
  const toggleModal = () => setModal(!modal);

  return (
    <div>
      <div className="table">
        <button onClick={this.toggleModal}> Modify Table</button>
        {modal ? (
          <EventsTable>
            <div>
              <h1>Select Columns</h1>
              <div className="buttons">
                <input
                  type="checkbox"
                  checked={firstName}
                  onChange={(e) => {
                    setOptions({ firstName: e.target.checked });
                  }}
                />
                <button onClick={this.updateTable(options)}>update</button>
                <button onClick={this.toggleModal}>Cancel</button>
              </div>
            </div>
          </EventsTable>
        ) : null}
      </div>{" "}
      <thead>
        <tr>
          {columns.map((column) => (
            <th key="column"> {column} </th>
          ))}
        </tr>
      </thead>
    </div>
  );
};

export default EventsSection;

import React, { useEffect, useRef } from "react";
import { createPortal } from "react-dom";

const EventsTable = ({ children }) => {
  const elRef = useRef(null);

  if (!elRef.current) {
    const div = document.createElement("div");
    elRef.current = div;
  }

  useEffect(() => {
    const modalRoot = document.getElementById("modal");
    modalRoot.appendChild(elRef.current);

    return () => modalRoot.removeChild(elRef.current);
  }, []);

  return createPortal(<div>{children}</div>, elRef.current);
};

export default EventsTable;

import React from "react";
import Table from "views/table";
import EventsSection from "./EventsSection";
const eventsData = [
  {
    key: 1,
    title: "Bulletproof EP1",
    firstName: "james",
    lastName: "cordon",
  },
];

const Home = () => {
  return <EventsSection events={eventsData} />;
};

export default Home;