将 DevExtreme Dialog / Popup 组件重写为 MaterialUI 等效项（react / javascript）答案

【问题标题】：Rewriting DevExtreme Dialog / Popup component to MaterialUI equivalent (react / javascript)将 DevExtreme Dialog / Popup 组件重写为 MaterialUI 等效项（react / javascript）
【发布时间】：2021-09-14 06:12:33
【问题描述】：

我将不再使用 DevExtreme/DevExpress 组件，最后一个是我的 Popup / Dialog 组件。

旧弹出窗口的工作方式是在后台渲染。弹出窗口被渲染，但被隐藏，直到 visible 属性被传递给它。我将其编码如下：

            <UniversalPopupComponent
                popupDefinition={ownerDatabaseView}
                popupValues={databaseRowData}
                onSubmit={this.myPopupSubmitted}
                onCancel={this.myPopupCancelled}
                visible={this.state.popupVisibility}
            />

Material UI 组件的工作方式似乎不同。对于初学者，我如何告诉 MaterialUI Dialog 仅在我单击调用 Dialog 组件的按钮时才显示，然后才进入实际添加数据和处理内部传递的数据以生成内容的部分？

我目前有 MUI 进度（PopupMUI.js）：

class UniversalPopupComponent extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            open: this.props.open
        }
    }

    handleClickClose = () => {
        this.setState({open: false})
    }

    render() {

        return (
            <Dialog open={this.state.open} onClose={this.handleClickClose}>
                <DialogContent>
                    placeholder
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.handleClickClose}> Close </Button>
                    <Button onClick={this.handleClickClose}> Submit </Button>
                </DialogActions>
            </Dialog>

        )
    }

}

export default UniversalPopupComponent;

并且在App.js中包含以下相关的东西：

class App extends React.Component {
state = {
    open: false,
};

handlePopupOpen = () => {
    this.setState({open:true})

}

render() {
      return (
         <div> ...
                <Button onClick={this.handlePopupOpen}> Open Menu </Button>
                <UniversalPopupComponent open={this.state.open} />
         ... </div>
)}

我无法让对话框以这种方式打开，通过将“打开”状态作为“真”传递给带有道具的组件内的对话框。

但是，如果我有以下情况，那么对话框打开和关闭也很好（点击关闭被定义为 setState({open:false})

                <Button onClick={this.handlePopupOpen}> Open Menu </Button>
                <Dialog open={this.state.open} onClose={this.handleClickClose}>
                    <DialogContent>
                        placeholder
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClickClose}> Close </Button>
                        <Button onClick={this.handleClickClose}> Submit </Button>
                    </DialogActions>
        </Dialog>

我还没有设置传递任何数据，因为最大的问题是对话框不会打开让我开始设置所有内容和重写部分。

【问题讨论】：

标签： reactjs material-ui dialog popup

【解决方案1】：

所以我愚蠢的大脑完全忘记了，一旦有东西在构造函数中，它就不会被更新。所以我传递了open 属性，但只写了一次。

我只是添加了一个componentDidUpdate，它将当前的 Open 状态与来自 prop 的 Open 的新状态进行比较，如果它们不同，则编写新的 prop 状态。

然后我添加了一个回调，这样当关闭某些东西时，它会将打开状态设置为 false，从而更新组件并关闭菜单。

【讨论】：