【发布时间】:2018-10-27 14:21:12
【问题描述】:
我刚刚从 material-beta 升级到新的 material-ui-text rc1。它编译并正常工作,期望组件通过应用于组件的不同 css 类设置为隐藏的 css 属性可见性进行初始化。我尝试了对话框组件(如下例所示)和弹出框组件。结果相同。两者都在启动时隐藏。
对话框组件应用了此类 .MuiModal-hidden-224。在我看来,该组件被初始化为隐藏是错误的。这是模式根目录的 HTML:
<div class="MuiModal-root-223 MuiDialog-root-216 MuiModal-hidden-224" role="dialog">
这是我正在使用的反应代码。
import * as React from "react";
import "./SharingDialog.less";
import Dialog from "@material-ui/core/Dialog";
import Button from "@material-ui/core/Button";
interface IProps {
locked: boolean
}
interface IState {
open: boolean;
anchorEl: any;
}
export default class SharingDialog extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
open: false,
anchorEl: null
}
}
handleOpen = (event:any) => {
this.setState({open: true, anchorEl: event.currentTarget});
}
handleClose() {
this.setState({open: false})
}
render() {
const { locked } = this.props;
return (
<div className="sharing-dialog">
<Button>Test</Button>
<button disabled={!locked} className="btn btn-primary" onClick={(event) => this.handleOpen(event)}>Open modal</button>
<Dialog
open={this.state.open}>
<div className="sharing-dialog-component">
Testing
</div>
</Dialog>
</div>
)
}
}
我做错了什么?为什么模态开始时是隐藏的?
【问题讨论】:
-
如何将 open 的默认状态更改为 true !
标签: reactjs material-ui