Я только что перешел с бета-версии материала на новый материал-интерфейс-текст 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>
)
}
}
Что я делаю неправильно? Почему модальное окно запускается как скрытое?





Я была такая же проблема. Похоже, обновление до React 16.3.2 решит проблему.
https://github.com/mui-org/material-ui/issues/11414
Чтобы быть более конкретным, необходимо обновить пакет NPM response-dom до версии 6.3.x, чтобы устранить проблему.
как насчет изменения состояния по умолчанию open на true!