单选格

Question

您好，我正在尝试将选择逻辑添加到我的 material ui 网格 (table).

这就是我return,

return (
    <Paper sx={{ width: "100%", overflow: "hidden" }}>
      <Table style={{ width: "100%" }}>
        <CatalogRightGridHeader selected={selected} />
        <TableBody xs={12} style={{ width: "100%" }}>
          {value.map((row) => {
            return (
              <TableRow hover role="checkbox" tabIndex={-1} key={row.nodeId}>
                <TableCell style={{ width: "10px!important", padding: 2 }}>
                  <Checkbox/>
                </TableCell>
                {row.rowItems
                  .sort(
                    (row1, row2) => row1.column.sequence - row2.column.sequence
                  )
                  .map((column) => {
                    return column.column.dataType === "DATE" ? (
                      <TableCell
                        key={column.id}
                        align={column.align}
                      >
                        {format(
                          new Date(parseInt(column.value)),
                          dateFormat(),
                          new Date()
                        )}
                      </TableCell>
                    ) : (
                      <TableCell
                        key={column.id}
                        align={column.align}
                      >
                        {column.value}
                      </TableCell>
                    );
                  })}
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );

我想在复选框上有一个逻辑，所以每当我选中它们时，我都想获取选中的行数据，并且每当我选中另一个复选框时它应该取消选中。如果你能给我一些如何做的提示或帮助我做，我将不胜感激。

Answer 1

您应该看看 MUI 的 DataGrid，它带有复选框选择。

此外，听起来您希望它们像单选按钮一样工作，这在用户体验上的区别在于复选框就像多项选择，而单选按钮推断只能选择一个。

如果您想继续使用香草 table，那么添加这样的复选框就可以了，从那里开始，当您映射时，添加一个索引。需要控制复选框

 const [checked, setChecked] = React.useState(null)

const handleCheckChange = (event, index) => {
  // If checkbox is changed to checked, set the index
  if (event.target.checked) {
    setChecked(index)
  } 
  // Since on change is fired every time the state changes, it'll fire when it
  // gets unchecked by checking something else, so only set back to null when 
  // it's unchecked while being the actively checked row
  else if (!event.target.checked && index === checked) {
    setChecked(null)
  }
}


value.map((row, index) => {
  return (
    <TableRow hover role='checkbox' tabIndex={-1} key={row.nodeId}>
      <TableCell style={{ width; '10px!important', padding: 2 }}>
        <Checkbox
          checked={checked === index}
          onChange={(event) => handleCheckChange(event, index)}
        />
      </TableCell>
      ...
  ) 
}

从这里，您现在知道选中的行并可以提取该数据作为

rowData[checked]

单选格

Single selection grid

grid

reactjs

material-ui