我有一个组件可以使用<Dialog>呈现完整筛选的<Table>。
此<Table>中的每一行都包含<TableCell>，其中包含<Button>个组件。
按下时，应弹出另一个未包含<Dialog>的全屏<Table>，并显示主<Table＆gt;中的对象。包含。
这样的事情：
--- ---篮总---产品---- -----日期
------- A --------- 3 ------------ [1] ------ someDate-- // {{1成为按钮
[1]的{p> onClick()会触发较小的[1]
--- ---名称价格--- ---数量
----产品------- 3 ---------- 1 ------- //嵌套<Dialog>
现在，我有一种方法可以将我从后端获得的日期解析为主<Dialog>中的日期列。
有趣的是，如果我按<Table>获取第二个较小的<Button>，则会再次调用该方法，所有内容都会冻结5秒钟，并且会有一堆窗口互相弹出。
我在状态中有<Dialog>变量，所以当我切换它时，我认为整个事情都会被重新渲染。这是有道理的。
我尝试使用open这实际上是一个更好的选择，但它只会崩溃Chrome。屏幕变黑，平行线穿过。
所以，基本上，我在<Modal>组件中做了两个循环。
以下是使用<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>甚至类似的方式解决这个问题。
我们的想法是在选择之前对购物篮中的内容进行简短的预览。
谢谢！