时间戳

首页 > 解决方案 > 单选网格

reactjs - 单选网格

问题描述

您好，我正在尝试将选择逻辑添加到我的材质 ui 网格（表）中。

这是我返回的，

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>
  );

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

标签： reactjsmaterial-uigrid

解决方案

您应该查看DataGrid复选框选择附带的 MUI。

此外，听起来您希望它们像单选按钮一样，UX 的不同之处在于复选框类似于多选，而单选按钮推断只能选择一个。

如果您想保留一个香草表，那么添加这样的复选框就可以了，从那里，当您映射时，添加一个索引。需要控制复选框

 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]

推荐阅读