Material-UI 多表折叠/展开答案

【问题标题】：Material-UI multiple table collapse/expandMaterial-UI 多表折叠/展开
【发布时间】：2021-09-19 14:39:41
【问题描述】：

我正在尝试使用 MateialUI 制作一个可折叠的表格目前，我的幻灯片都有折叠但它们链接到一个“打开”状态，所以如果我打开一张幻灯片，所有其他幻灯片都会打开。

这里是一个 sansbox：https://codesandbox.io/s/withered-bash-e1mzu?file=/src/components/BrandTable.js

props 对象数组需要为我拥有的每张幻灯片提供一个可折叠的表格。

const props = [
            {slide: "Protein", charts: ["Keto"]},
            {slide: "Bars with benefits - beyond the nutritional profile", charts: ["Innovative approaches"]},
            {slide: "Vegan", charts: []}
          ]

        return (
        <div>
        
        
       
        {
       
          props.map((blog) => 
          
          <React.Fragment>
        <TableRow  key={props} >
          <TableCell component="th" scope="row">
            {blog.slide}
          </TableCell>
          <TableCell size="small">
            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon/>}
            </IconButton>
          </TableCell>
        </TableRow> 
        <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
                {
                    open &&   <Box margin={1}>
                    <Table size="small" aria-label="purchases">
                      <TableBody>
                      {blog.charts}
                      </TableBody>
  
                    </Table>
                  </Box>
                }
                </Collapse>
          </TableCell>
        </TableRow>
          }

      </React.Fragment>
          
          
          
          )
        }
       
            </div> 

            

    )
}

【问题讨论】：

将迭代移出Row 组件[或] 使用行ID 来跟踪打开/关闭状态。

标签： javascript reactjs material-ui

【解决方案1】：

您可以通过维护如下本地状态来跟踪打开/关闭状态，

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

并根据带有id的item点击更新，

 <IconButton
              aria-label="expand row"
              size="small"
              onClick={() =>
                setOpen((prev) => ({ ...prev, [blog.id]: !prev[blog.id] }))
              }
            >

行组件：-

const Row = () => {
    return (
      <div>
        {props.map((blog) => (
          <React.Fragment>
            <TableRow key={props}>
              <TableCell component="th" scope="row">
                {blog.slide}
              </TableCell>
              <TableCell size="small">
                <IconButton
                  aria-label="expand row"
                  size="small"
                  onClick={() =>
                    setOpen((prev) => ({ ...prev, [blog.id]: !prev[blog.id] }))
                  }
                >
                  {open[blog.id] ? (
                    <KeyboardArrowUpIcon />
                  ) : (
                    <KeyboardArrowDownIcon />
                  )}
                </IconButton>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                style={{ paddingBottom: 0, paddingTop: 0 }}
                colSpan={6}
              >
                <Collapse in={open[blog.id]} timeout="auto" unmountOnExit>
                  {open[blog.id] && (
                    <Box margin={1}>
                      <Table size="small" aria-label="purchases">
                        <TableBody>{blog.charts}</TableBody>
                      </Table>
                    </Box>
                  )}
                </Collapse>
              </TableCell>
            </TableRow>
          </React.Fragment>
        ))}
      </div>
    );
  };

codesandbox - https://codesandbox.io/s/nostalgic-chatelet-m9emk?file=/src/components/BrandTable.js:1101-2543

【讨论】：

【解决方案2】：

请尝试在此处查看此示例： https://codesandbox.io/s/kbcee

我认为您可以存储展开行的活动 ID，而不仅仅是打开/关闭状态。或者您可以创建Row 组件，其中打开状态每次仅在组件内部使用。

【讨论】：