时间戳

首页 > 解决方案 > setOpen 不会影响表中的特定行

reactjs - setOpen 不会影响表中的特定行

问题描述

每当我单击 IconButton 时，所有行都会扩展，而实际上我只希望它扩展我单击它的特定行。这里有什么问题吗？

这是我的代码：

const [open, setOpen] = React.useState(false);

<TableBody>
      {drugs.map((drug) => (
        <>
    <TableRow key={drug._id}>
        <TableCell>
      <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
      </IconButton>
    </TableCell>
          <TableCell>{drug.name}</TableCell>
          <TableCell align="right">{drug.class}</TableCell>
          <TableCell align="right">{drug.suggestedDoseAdult}</TableCell>
          <TableCell align="right">{drug.suggestedDosePediatric}</TableCell>
          <TableCell align="right">{drug.administered}</TableCell>
        </TableRow>
        <TableRow>
    <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
      <TableRow>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <Box margin={1}>
          <Typography variant="h7" gutterBottom component="div">
            {drug.description}
          </Typography>
        </Box>
      </Collapse>
      </TableRow>
    </TableCell>
  </TableRow>
  </>
      ))}
    </TableBody>

标签： reactjsmaterial-uireact-functional-component

解决方案

您可以在您的状态下存储打开的 id，而不是使用布尔值：

const [open, setOpen] = React.useState(null);

const handleSelect = (id) => {
  setOpen(currentId => {
    // if it's already opened then unselect it
    if (currentId === id) return null
    return id
  })
}

在您的 IconButton 上，您与 drug._id 进行比较：

<IconButton aria-label="expand row" size="small" onClick={() => handleSelect(drug._id)}>
  {open === drug._id ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
...
<Collapse in={open === drug._id } timeout="auto" unmountOnExit>

推荐阅读