Блог

Я отказываюсь от использования компонентов DevExtreme/DevExpress, и последним из них является мой компонент всплывающего окна / диалога.

Старое всплывающее окно работало так, что оно отображалось в фоновом режиме. Всплывающее окно отображается, но скрыто до тех пор, пока visible ему не будет передан атрибут. Я закодировал его следующим образом:

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

Компонент пользовательского интерфейса Material, похоже, работает по-другому. Для начала, как мне указать, чтобы диалоговое окно MaterialUI отображалось только при нажатии кнопки, где вызывается компонент диалога, прежде чем я перейду к части фактического добавления данных и обработки данных, которые передаются внутри для создания содержимого?

В настоящее время у меня есть прогресс 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({открыть:ложь})

                 <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>
 

Я еще не настроился на передачу каких-либо данных, так как большая проблема заключается в том, что диалоговое окно не откроется, чтобы я мог начать настройку всего и переписать части.

Так что мой глупый мозг совершенно забыл, что, как только что-то находится в конструкторе, оно не обновляется. Так что я передавал open реквизит, но написал его только один раз.

Я просто добавил componentDidUpdate функцию, которая сравнивает текущее состояние Open с новым состоянием Open из prop, если они отличаются, напишите новое состояние prop.

Затем я добавил обратный вызов, чтобы, когда что-то закрывается, оно устанавливало состояние открыто на false, что обновляет компонент и закрывает меню.