如何仅在单击该行时展开该行？

Question

我有这个材料-ui table。每次我单击按钮展开第 1 行时，它也会展开第二行。我该如何解决这个问题，只有那个特定的行会展开？

<Table stickyHeader aria-label="sticky table">
  <TableHead>
    <TableRow hover>
      <TableCell>Title</TableCell>
      <TableCell>Created Date</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
  {data &&
   data((index) => (
    <TableRow hover>
      <TableCell>
        <IconButton
          aria-label="expand row"
          size="small"
          onClick={() => setOpen(!open)}
          >
          {open ? (
            <KeyboardArrowUpIcon />
          ) : (
            <KeyboardArrowDownIcon />
          )}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {index.title}
        </TableCell>
        <TableCell component="th" scope="row">
          {new Date(
            index.createdDate.seconds * 1000
          ).toDateString()}
        </TableCell>
        <TableCell colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            {index.text}
          </Collapse>
        </TableCell>
      </TableRow>
     ))}
   </TableBody>
 </Table>

Answer 1

将 TableRow 包装在一个组件中

const Row = ({item}) => {
  const [open, setOpen] = useState(false);

  return <TableRow>...</TableRow>
}

<TableBody>
  {data.map((item, index) => (
    <Row key={index} item={item} />
  ))}
</TableBody>

如何仅在单击该行时展开该行？

How can I expand the row only when that row was clicked?

javascript

reactjs

material-ui

mui-datatable