React Material UI 删除选定的单元格

Question

我正在使用来自 material ui 的 table 示例。

这是link在线项目https://codesandbox.io/s/209kpmpvx0

该示例允许您为多行添加单元格，当您单击该行时会显示一个删除图标。

我希望能够在按下删除图标后打印出所有 selected 行。

这是 class 可以让你 select 一行。

    class EnhancedTable extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          selected: [],
          }

        handleClick = (event, id) => {
        const { selected } = this.state;
        const selectedIndex = selected.indexOf(id);
        let newSelected = [];

    this.setState({ selected: newSelected });
  };

我把下面的代码selectedId={selected.id}放到了EnhancedTableHead组件中。

return (
  <Paper className={classes.root}>
    <EnhancedTableToolbar numSelected={selected.length} />
    <div className={classes.tableWrapper}>
      <Table className={classes.table} aria-labelledby="tableTitle">
        <EnhancedTableHead
          numSelected={selected.length}
          selectedId={selected.id}
          order={order}
          orderBy={orderBy}
          onSelectAllClick={this.handleSelectAllClick}
          onRequestSort={this.handleRequestSort}
          rowCount={data.length}
        />

然后我将 selectedId 添加到 EnhancedTableToolbar。我还在删除图标中添加了一个事件处理程序。

let EnhancedTableToolbar = props => {
  const { numSelected, classes } = props;
  return (
    <Toolbar
      className={classNames(classes.root, {
        [classes.highlight]: numSelected > 0
      })}
    >
      <div className={classes.title}>
        {numSelected > 0 ? (
          <Typography color="inherit" variant="subheading">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant="title" id="tableTitle">
            Nutrition
          </Typography>
        )}
      </div>
      <div className={classes.spacer} />
      <div className={classes.actions}>
        {numSelected > 0 ? (
          <Tooltip title="Delete">
            <IconButton aria-label="Delete">
              <DeleteIcon onClick={printdeletearray} />
            </IconButton>
          </Tooltip>
        ) : (
          <Tooltip title="Filter list">
            <IconButton aria-label="Filter list">
              <FilterListIcon />
            </IconButton>
          </Tooltip>
        )}
      </div>
    </Toolbar>
  );
};

我收到一条错误消息，提示 selectedId 未定义。

   const printdeletearray = () => {
      console.log(this.state.selected);
    };

Answer 1

我猜你犯了两个错误：

首先你应该在 <EnhancedTableToolbar /> 中将 selected 作为 selectedId 道具传递：

<EnhancedTableToolbar
    numSelected={selected.length}
    selectedId={selected}
/>

第二个错误是你应该像这样将 selectedId 传递给 printdeletearray()：

<DeleteIcon onClick={() => printdeletearray(selectedId)} />

这是你的 Demo

React Material UI 删除选定的单元格

React Material UI Delete Selected Cells

delete-row

reactjs

material-ui