У меня есть приложение реагирования, которое использует Material UI.Я хочу иметь диалог, который можно открыть несколько раз.И диалог, который используется на одном шаге «степпера».
Приведенный ниже код позволяет мне открывать диалоговое окно несколько раз, но способ, которым я получил эту работу, заключался в добавлении componentWillReceiveProps, и это решение кажется странным.Без componentWillReceiveProps диалоговое окно открывается в первый раз, но не при последовательных щелчках.Есть ли лучший способ разрешить сброс настроек пропущенных в?Я предполагаю, что моя проблема в том, что реквизиты устанавливаются при первом создании компонента, а затем приложение не воссоздает компонент, а реквизиты используют старое значение, установленное в событии закрытия?
Кроме тогоСтранное поведение при переходе между ступенями.Если я нажму на шаг 2, появится диалоговое окно.Как мне выполнить рефакторинг, чтобы избежать такого поведения?
Эти шаблоны более или менее скопированы из приведенных здесь примеров: https://material -ui.com /
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import ReactDOM from 'react-dom'
import React, { Component } from 'react';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Dialog from '@material-ui/core/Dialog';
import CloseIcon from '@material-ui/icons/Close';
class FullScreenDialog extends Component {
constructor(props) {
super(props);
this.state = {};
this.state.isOpen = props.isOpen;
}
handleClickOpen = () => {
this.setState({ isOpen: true });
};
componentWillReceiveProps(nextProps) {
this.setState( { isOpen: nextProps.isOpen } );
}
handleClose = () => {
this.setState({ isOpen: false });
};
render() {
return (
<Dialog fullScreen open={this.state.isOpen} onClose={this.handleClose}>
<AppBar >
<Toolbar>
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
<CloseIcon />
</IconButton>
<Typography variant="title" color="inherit" >
A dialog
</Typography>
</Toolbar>
</AppBar>
<div>
{ /* Without both of these I don't see the content */ }
<h1>The body of the dialog.</h1>
<h1>The body of the dialog.</h1>
</div>
</Dialog>
);
}
}
class VerticalLinearStepper extends Component {
constructor(props) {
super(props);
this.state = { noteDialogIsOpen: false, activeStep: 0 };
}
getSteps() {
return ['First step', 'Second step'];
}
getStepContent(step, doc, query) {
switch (step) {
case 0:
return (
<Typography>
{ this.state.noteDialogIsOpen &&
<FullScreenDialog isOpen={this.state.noteDialogIsOpen} query={query} doc={doc}/>
}
<Button onClick={this.openNoteDialog}>Open dialog.</Button>
</Typography>
)
case 1:
return "Something or other";
default:
return "Unsure";
}
}
openNoteDialog = () => {
this.setState( { noteDialogIsOpen: true } );
}
onClose() {
this.setState( { noteDialogIsOpen: false } );
}
handleNext = () => {
this.setState({
activeStep: this.state.activeStep + 1,
});
};
handleBack = () => {
this.setState({
activeStep: this.state.activeStep - 1,
});
};
handleReset = () => {
this.setState({
activeStep: 0,
});
};
render() {
const { query, doc } = this.props;
const steps = this.getSteps();
const { activeStep } = this.state;
return (
<div>
<Stepper activeStep={activeStep} orientation="vertical">
{steps.map((label, index) => {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
{this.getStepContent(index,doc,query)}
<Button disabled={activeStep === 0} onClick={this.handleBack}>Back</Button>
<Button onClick={this.handleNext}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</StepContent>
</Step>
);
})}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} >
<Typography>All steps completed.</Typography>
<Button onClick={this.handleReset}>
Reset
</Button>
</Paper>
)}
</div>
);
}
}
ReactDOM.render(
<div>
<VerticalLinearStepper query="asdasdasd" doc="asdadasdsa"/>
</div>,
document.getElementById('react-container')
Вероятно, это два разных вопроса, но они настолько переплетены, что я не вижу, как их разделение позволяет задавать их изолированно ...
Если это имеет значение, то package.json находится здесь:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^1.0.0",
"@material-ui/icons": "^1.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-navigation": "^2.0.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "PORT=3006 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Это было создано с использованием create-react-app и изменено, чтобы включить дизайн материала