javascript - 带有表格的嵌套材质 UI 对话框未呈现

Question

我有一个<Dialog>使用<Table>.

此行中的每一行都<Table>包含一个<TableCell>，其中包含一个<Button>组件。

按下时，应该弹出另一个<Dialog>包含 a 的非全屏并显示 main > 中的对象包含的内容。<Table><Table

像这样的东西：

---篮子---总计---产品----日期-----

--------A---------3------------[1]-----someDate-- //[1]是按钮

onClick()的[1]触发器越小<Dialog>

---名称---价格---数量---

----Prod--------3---------1-------- //嵌套<Dialog>

现在，我有一个方法可以将我从后端获得的日期解析到 main 中的Date列中<Table>。

有趣的是，如果我按<Button>第二次，更小<Dialog>，该方法会再次被调用，所有内容都会冻结 5 秒钟，然后会弹出一堆窗口。

我的open变量处于状态，所以我认为当我切换它时整个事情都会重新渲染。这是有道理的。

我尝试使用<Modal>which 实际上是一个更好的选择，但它只会使 Chrome 崩溃。屏幕变黑并带有平行线。

所以，基本上，我在<Dialog>组件中做了两个循环。

这是使用的代码<Dialog>：

<Dialog
    open={this.props.loadBasketsWindowOpen}
    transition={Transition}
    keepMounted
    onClose={this.handleClose}
    aria-labelledby="alert-dialog-slide-title"
    aria-describedby="alert-dialog-slide-description"
    fullScreen
    >
    <DialogTitle id="alert-dialog-slide-title">
       <p style={centerDiv}>{"Baskets: "}{this.props.openBaskets.length}</p>
       <hr style={horizontalLineStyle}/>
    </DialogTitle>
    <DialogContent>
        <div style={centerDiv}>
            <Table>
               <TableHead>
                   <TableRow>
                       <TableCell style={tableTextStyle}>User</TableCell>
                       <TableCell style={tableTextStyle}>Total</TableCell>
                       <TableCell style=tableTextStyle}>Products</TableCell>
                       <TableCell style={tableTextStyle}>Date</TableCell>
                       <TableCell></TableCell>
                   </TableRow>
                </TableHead>
                <TableBody>
                   {this.props.baskets !== undefined ? 
                     this.props.baskets.map(basket => {
                     return(
                        <TableRow key={basket.id}>
                        <TableCell style={tableTextStyle}>
                            {basket.user}
                        </TableCell>
                        <TableCell style={tableTextStyle}>
                            €{basket.total}
                        </TableCell>
                        <TableCell style={tableTextStyle}>
                           <Button onClick={this.onToggle}>                                                          
                            {basket.posBasketItems.length}
                              <Dialog
                                open={this.state.innerTableWindowOpen}
                                onClose={this.handleClose}
                                aria-labelledby="alert-dialog-slide-title"
                                aria-describedby="alert-dialog-slide- 
                                description"
                              >
                                <DialogTitle>
                                  <p style={centerDiv}>
                                     {"Cart: "} 
                                     {basket.length} Products
                                  </p>
                                  <hr style={horizontalLineStyle}/>
                                </DialogTitle>
                                <DialogContent>
                                  <Table>                                                  
                                    <TableHead>                           
                                       <TableRow>                                                                           
                                          <TableCell>
                                             Name
                                          </TableCell>
                                          <TableCell>
                                             Price
                                          </TableCell>
                                          <TableCell>
                                             Quantity
                                          </TableCell>
                                        </TableRow>                        
                                     </TableHead>                              
                                  <TableBody>                               
                                    {basket.items.map(item => {                                  
                                       return (                                
                                         <TableRow key={item.id}>  

                                            <TableCell>
                                              {item.name} 
                                            </TableCell>

                                            <TableCell>
                                              {item.price}
                                            </TableCell>

                                            <TableCell>
                                              {item.quantity}
                                            </TableCell>

                                          </TableRow>

                                        );
                                     })}                          
                                   </TableBody>
                                  </Table>
                                </DialogContent>
                              </Dialog>
                            </Button>
                           </TableCell>

                           <TableCell>
                             {this.parseDate(basket.date)} 
                           </TableCell>

                           <TableCell>
                             <Button 
                              onClick={()=>this.setToCurrentBasket(basket)}
                             >
                             <ADD_TO_SHOPPING_CART />
                             </Button>
                           </TableCell>
                         </TableRow>
                       );
                }) : ''}
              </TableBody>
             </Table>
           </div>
          </DialogContent>
         <DialogActions>
            <div>
               <MuiThemeProvider theme={cancelButtonTheme}>
                  <Button 
                     variant="raised" 
                     onClick={this.closeOpenBasketsWindow} 
                     color="secondary"
                  >
                     CANCEL
                  </Button>
               </MuiThemeProvider>
            </div>
         </DialogActions>
     </Dialog>

这是onToggle()和状态

state = {
   innerTableWindowOpen: false
};

onToggle = () => {
   this.setState({
      innerTableWindowOpen: !this.state.innerTableWindowOpen
   });
}

我将不胜感激任何想法来解决这个问题，<Dialog>甚至<Modal>类似的东西。

这个想法是在选择一个之前对篮子中的内容有一个简短的预览。

谢谢！

标签： javascriptcssreactjsfrontendmaterial-ui