установите флажок определенного значения, которое должен скрыть соответствующий столбец таблицы - PullRequest
Новая
       10

установите флажок определенного значения, которое должен скрыть соответствующий столбец таблицы

0 голосов
/ 11 октября 2019
  • при нажатии на фильтр в правом верхнем углу открывается меню.
  • в этом меню есть значения заголовков таблицы с флажками.
  • при выборе флажка определенногозначение соответствующего столбца таблицы должно скрываться.
  • , поэтому я написал событие щелчка для этого флажка, но я не уверен, как передать туда значения столбцов таблицы и скрыть его
  • Я отладил, установив консоличтобы получить значения. const handleColumnHide = event => { console.log("event--->", event); console.log("event.target.value--->", event.target.value); };
  • но я получаю неопределенное значение.
  • подскажите, как это исправить.
  • предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/material-demo-210lr

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Donut", 452, 25.0, 51, 4.9),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Gingerbread", 356, 16.0, 49, 3.9),
  createData("Honeycomb", 408, 3.2, 87, 6.5),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Jelly Bean", 375, 0.0, 94, 0.0),
  createData("KitKat", 518, 26.0, 65, 7.0),
  createData("Lollipop", 392, 0.2, 98, 0.0),
  createData("Marshmallow", 318, 0, 81, 2.0),
  createData("Nougat", 360, 19.0, 9, 37.0),
  createData("Oreo", 437, 18.0, 63, 4.0)
];

const handleColumnHide = event => {
    console.log("event--->", event);
    console.log("event.target.value--->", event.target.value);
  };

   <Tooltip title="Filter list">
            <IconButton aria-label="filter list">
              <FilterListIcon onClick={handleClick} />
              <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={handleClose}
              >
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                  />
                  Dessert
                </MenuItem>
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                  />
                  Calories
                </MenuItem>
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                  />
                  Fat
                </MenuItem>
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                  />
                  Carbs
                </MenuItem>
                <MenuItem onClick={handleClose}>
                  <Checkbox
                    onChange={handleColumnHide}
                    inputProps={{ "aria-label": "select all desserts" }}
                  />
                  Protein
                </MenuItem>
              </Menu>
            </IconButton>
          </Tooltip>

1 Ответ

0 голосов
/ 11 октября 2019

Пожалуйста, используйте event.currentTarget вместо прямого использования event. Это часть оптимизации событий JavaScript. Вы можете передать функцию из EnhancedTable в EnhancedTableToolbar для обработки скрытия столбцов. Таким образом, в EnhancedTable: 

// initialRows are the raw data you generated
// change to useState here so your component is updated when the rows change
const [rows, setRows] = React.useState(initialRows);


const hideColumns = colsToHide => {
    // filter out the columns
    let resultRows = initialRows.slice().map(row => {
      // construct a new object
      let result = {};
      let keys = Object.keys(initialRows[0]);
      // add in the properties to the new object 
      // only if it's not in the cols to hide
      for (let key of keys) {
        if (!colsToHide .includes(key)) result[key] = row[key];
      }
      return result;
    });
    // TODO: remove the cols to hide from headers as well
    setRows(resultRows);
  };

// pass the hideColumns function as props to EnhancedTableToolbar
<EnhancedTableToolbar
          numSelected={selected.length}
          hideColumns={hideColumns}
        />

В EnhancedTableToolbar измените свой handleColumnHide: 

// state to keep the list of columns to hide
const [hideList, setHideList] = React.useState([]);

// when the onChange event of the checkbox happens
// add to hideList if it is checked, otherwise remove from list
// then call the hideColumns function passed from props
const handleColumnHide = (event, isChecked) => {
  if (isChecked) {
    let resultList = hideList.slice();
    resultList.push(event.currentTarget.value);
    setHideList(resultList);
    props.hideColumns(resultList);
  } else {
    // TODO: remove from result list
  }
};

// you need to add a value props to your checkbox
// this value has to match the createData function
<Checkbox
  onChange={handleColumnHide}
  inputProps={{ "aria-label": "select all desserts" }}
  value="name"
/>

В кодах andbox: https://codesandbox.io/s/material-demo-v8e9s

Работает на сокрытии десерта. Чтобы он полностью работал, вам нужно завершить Todos.

...