Question

当我单击右上角菜单上的过滤器时。
在该菜单中，它具有带有复选框的表标题值。
当我选中特定值的复选框时，相应的表列应隐藏。
所以我为该复选框编写了一个click事件，但不确定如何在其中传递表列值并将其隐藏
我通过放置控制台进行调试以获取值。 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>

Answer 1

请使用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"
/>

在codeandbox中：https://codesandbox.io/s/material-demo-v8e9s

它可以隐藏甜点。要使其完全正常运行，您需要完成待办事项。

选择特定值的复选框，相应的表格列应隐藏

1 个答案: