javascript - 选择相应表列应隐藏的特定值的复选框

Question

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

标签： javascripthtmlreactjsreduxmaterial-ui

Answer 1

请使用event.currentTarget而不是直接使用event. 它是 javascript 事件优化的一部分。您可以将 EnhancedTable 中的函数传递给 EnhancedTableToolbar 来处理列的隐藏。
所以在增强表中：

// 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"
/>

在代码沙盒中： https ://codesandbox.io/s/material-demo-v8e9s

它适用于隐藏甜点。要使其充分发挥作用，您需要完成待办事项。