Javascript “嵌套材质UI”对话框，表未呈现
我有一个组件，它用一个 此Javascript “嵌套材质UI”对话框，表未呈现,javascript,css,reactjs,frontend,material-ui,Javascript,Css,Reactjs,Frontend,Material Ui,我有一个组件，它用一个 此中的每一行都包含一个，其中包含一个组件 按下时，应弹出另一个包含的未全屏，并显示主中的对象所包含的内容 类似这样的内容： <Dialog open={this.props.loadBasketsWindowOpen} transition={Transition} keepMounted onClose={this.handleClose} aria-labelledby="alert-dialog-slide-title"
，并显示主中的对象所包含的内容
类似这样的内容：
<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>
---篮子---总数---产品----日期------
-------A------3------[1]----someDate--//[1]
是按钮
[1]
的onClick（）
触发较小的
---名称---价格---数量---
----产品--------3--------1-------//嵌套的
现在，我有了一个方法，可以将从后端获取的日期解析到主
中的日期列中
有趣的是，如果我第二次按
，更小的
，该方法会再次被调用，所有东西都会冻结5秒钟，一堆窗口会相互弹出
我的open
变量处于状态，所以我认为当我切换它时，整个事情都会变得更有趣。这是有道理的
我试着使用
，这实际上是一个更好的选择，但它只是使Chrome崩溃。屏幕变黑，平行线交叉
基本上，我在
组件中做了两个循环
以下是使用
的代码：
<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>
如果有任何想法可以用
或
或类似的东西来解决这个问题，我将不胜感激
我们的想法是在选择一个篮子之前，对篮子里的东西进行一次简短的预览
谢谢 如果你举个例子，我会帮你看看。我会的，但它只有材料UI 0.20。。。没关系，我只是用npm得到了正确的版本。它是。我不知道为什么它没有渲染，但我尝试在从后端获得它时以某种方式添加所有内容。那里有太多错误，无法查看。你能把它弄好然后寄给我吗？