【问题标题】:material-ui-next component is initialize as hiddenmaterial-ui-next 组件被初始化为隐藏
【发布时间】: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


【解决方案1】:

我有同样的问题。看来更新到 React 16.3.2 将解决这个问题。

https://github.com/mui-org/material-ui/issues/11414

【讨论】:

  • 更具体地说,需要将 NPM 包 react-dom 更新到 6.3.x 版本才能解决问题。
猜你喜欢
  • 1970-01-01
  • 2018-09-25
  • 2014-09-19
  • 1970-01-01
  • 2021-04-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多