javascript - 通过复选框选中/取消选中隐藏和显示表格列

Question

我是编程新手，现在只是一个大三学生。我有复选框列表。当我取消选中一个复选框时，我希望该特定列从前端消失。简单地说，我有一张表，里面有一些数据。假设它有 3 列，当我取消选中其中的 2 列时，这 2 列应该消失。这是我的一段代码，现在，它将未选中的复选框保存到 LocalStorage。感谢您的任何建议和提示！如果你能展示出好的方向，真的很感激：D

export default () => {
  const [isOpen, setIsOpen] = useState(false);
  const [onOkClick, setOnOkClick] = useState(false);
  const [isDialogOpen, setDialogOpen] = useState(false);
  const [isDataTable, setDataTable] = useState(true);
  const [isDefaultChecked, setDefaultChecked] = useState(true);
  const [isChecked, setChecked] = useState();
  const [isColumn, setColumn] = useState(true);
  const [hiddenColumns, setHiddenColumns] = useState([]);
  const [Checked, setIsChecked] = useState([]);
  
  const onCheckboxChange = (key: string, value: boolean) => {
    console.log(key, value);
    // const array = JSON.parse(localStorage.getItem("hiddenColumns"));

    if (!value)
      setHiddenColumns((hiddenColumns) => [...hiddenColumns, { label: key }]);
    else setHiddenColumns(hiddenColumns.filter((x) => x.label !== key));
  };
  
  return (
  <Dialog
          isOpen={isDialogOpen}
          onOkClick={() => {
            localStorage.setItem(
              "hiddenColumns",
              JSON.stringify(hiddenColumns)
            );
            console.log(hiddenColumns);
            setDialogOpen(false);
          }}
          onCloseClick={() => setDialogOpen(false)}
   >
    <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Delivery methods"
              onChange={(value) => onCheckboxChange("delieveryMethods", value)}
            />
          </div>
          <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Delivery Date"
              onChange={(value) => onCheckboxChange("delieveryDate", value)}
            />
          </div>
          <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Organization Name"
              onChange={(value) => onCheckboxChange("organization", value)}
            />
          </div>
          <div>
          <APIDataTable<Mail>
          apiPath="/edo/chancellery/maildoc_extinc"
          params="?on_marking=true "
          type={Mail}
          columns={[
            new Column<Mail>({
              label: "Delivery Methods",
              render: (row) => {
                return "";
              },
            }),
            new Column<Mail>({
              label: "Delivery Date",
              render: (row) => {
                return row.incomingDateText;
              },
            }),
            new Column<Mail>({
              label: "Organizaion Name",
              render: (row) => {
                return row.organizationNameOrFullName;
              },
            }),
          </div>
  )
  };

标签： javascriptreactjstypescript

Answer 1

将状态类型更改hiddenColumns为对象并将布尔值设置为正确的键。例如{ delieveryMethods: true }。此外，单独columns用于过滤操作。检查下面的详细信息。

  // ...
  const [hiddenColumns, setHiddenColumns] = useState({});
  // ...

  const onCheckboxChange = (key: string, value: boolean) => {
    console.log(key, value);
    // const array = JSON.parse(localStorage.getItem("hiddenColumns"));
    setHiddenColumns(prev => ({...prev, [key]: value}));
  };

  const columns = [];

  if (!hiddenColumns['delieveryMethods']) {
    columns.push(
      new Column<Mail>({
        label: 'Delivery Methods',
        render: row => {
          return '';
        },
      }),
    );
  }
  if (!hiddenColumns['delieveryDate']) {
    columns.push(
      new Column<Mail>({
        label: 'Delivery Date',
        render: row => {
          return row.incomingDateText;
        },
      }),
    );
  }
  if (!hiddenColumns['organization']) {
    columns.push(
      new Column<Mail>({
        label: 'Organizaion Name',
        render: row => {
          return row.organizationNameOrFullName;
        },
      }),
    );
  }

<APIDataTable<Mail>
  apiPath="/edo/chancellery/maildoc_extinc"
  params="?on_marking=true "
  type={Mail}
  columns={columns}
/>