Question

我正在使用材料ui中的表格示例。

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

的链接

该示例允许您对多个行进行单元格设置，并且在单击该行时会显示一个删除图标。

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

这是允许您选择行的类。

    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

我猜你犯了两个错误：

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

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

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

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

这是您的Demo

React Material UI删除所选单元格

1 个答案: