столбцы должны быть добавлены только после того, как я установил флажки - PullRequest
Новая
       22

столбцы должны быть добавлены только после того, как я установил флажки

0 голосов
/ 12 октября 2019
  • У меня есть таблица с фиктивными данными.
  • к этой таблице я планирую добавить новые столбцы.
  • в правом углу вы увидите значок.
  • при нажатии значка открывается меню с именами столбцов.
  • в нижней части columns need to be added вы увидите добавляемые столбцы.
  • прямо сейчас при загрузкеНа самой странице все столбцы видны.
  • , но столбцы следует добавлять только после того, как я установлю флажки.
  • Для этого я создал метод с именем 'showNewColumns'
  • , нокогда я пытаюсь вызвать этот метод, приложение ломается
  • столбцы должны показываться только после того, как я установил флажок, и он должен скрываться после того, как я снял флажок
  • Можете ли вы сказать мне, как это исправить.
  • предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/material-demo-j58b4

со встроенным API https://codesandbox.io/s/material-demo-o8wb4

demo.js 

const headCells = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  { id: "calories", numeric: true, disablePadding: false, label: "Calories" },
  { id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
  { id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
  { id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" },
  {
    id: "New Column 1",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)"
  },
  {
    id: "New Column 2",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)"
  }
];



const showNewColumns = cols => {
    console.log("showNewColumns hideColumns resultRows--->", resultRows);
    let resultRows = initialRows.slice().map(row => {
      let result = {};
      let keys = Object.keys(initialRows[0]);

      console.log("showNewColumns hideColumns keys--->", keys);

      for (let key of keys) {
        console.log("showNewColumns hideColumns row[key]--->", row[key]);
        console.log("showNewColumns hideColumns result[key]--->", result[key]);
        console.log(
          "showNewColumns hideColumns cols.includes(key)--->",
          cols.includes(key)
        );
        console.log(
          "showNewColumns hideColumns !cols.includes(key)--->",
          !cols.includes(key)
        );

        if (!cols.includes(key)) result[key] = row[key];
      }

      // for (let key of keys) {
      //   if (!cols.includes(key)) result[key] = row[key];
      // }
      return result;
    });

    console.log("showNewColumns hideColumns  resultRows--->", resultRows);

    // TODO: remove from headers as well
    setRows(resultRows);
  };


   <EnhancedTableToolbar
          numSelected={selected.length}
          hideColumns={hideColumns}
          showNewColumns={showNewColumns}
        />

          if (isChecked) {
      let resultList = hideList.slice();
      console.log("hideColumns resultList--->", resultList);
      resultList.push(event.currentTarget.value);
      setHideList(resultList);
      props.hideColumns(resultList);
      //showNewColumns

      console.log("hideColumns showNewColumns resultList--->", resultList);
      // props.showNewColumns(resultList);
    } else {
      // TODO: remove from result list
    }
  };
...