reactjs - 触发对话框关闭后,材质 UI 工具提示保持打开状态
问题描述
我的假设是对话框的状态导致了这个问题,但我无法弄清楚这一点。在单击 IconButton 之前,工具提示将按预期工作。对话框按应有的方式弹出,但是当退出对话框时,工具提示弹出为活动状态。
class DeleteDocument extends React.Component {
state = {
open: false,
};
onDeleteFile() {
try {
ensureJobIsUnlocked();
} catch (err) {
return;
}
const confirmedByUser = true;
if (confirmedByUser) {
this.props.onDeleteFile(this.props.selectedDocument.id);
this.setState({ open: false });
}
}
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
render() {
return (
<div>
<Tooltip id="tooltip-icon" title="Delete Document">
<div>
<IconButton
disabled={(this.props.selectedDocument == null)}
onClick={this.handleClickOpen}
>
<DeleteIcon />
</IconButton>
</div>
</Tooltip>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'Delete Document'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
This will delete the currently active PDF/Component Design. Are you sure you want to do this?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.onDeleteFile.bind(this)} color="primary" autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
解决方案
推荐阅读
- list - 如何使用 Haskell 检查列表的空交集
- c# - 试图为json创建模型
- c# - 无法将值 NULL 插入列“BaslikId”
- magento2 - Magento 2 Catalog Image Upload save Cloudflare blocks request 技术问题 与服务器创建错误
- c# - 以编程方式查看 IL
- flutter - 如果未经授权,颤振如何重定向到登录
- octobercms - 为什么 OctoberCMS 缺少可视化编辑器 Page & Post 内容?
- mysql - 后跟 SELECT LAST_INSERT_ID 时 INSERT 不起作用
- amazon-web-services - 如何在 Jmeter 中验证 Amazon AWS Cognito 调用?
- arrays - 在过程中创建一个包含 UIBezierPath 和 NSArray x Array 的 CGRect