Как добавить форму Material-UI с помощью Steppers в React-Amin Create Component - PullRequest
Новая
       33

Как добавить форму Material-UI с помощью Steppers в React-Amin Create Component

0 голосов
/ 23 ноября 2018

У меня очень длинная форма в моем приложении React-Admin .Я хотел бы добавить элементы формы в степпер.

Из Material-UI они предоставляют пример Степперы

То, на что похожа помощь:

  1. Как добавить такие компоненты, как функция степпера

getStepContent ()

Как обернуть все входные компоненты в форму

Избегать перехода к следующему шагу, если форма в шаге не проверена.

функция getStepContent(stepIndex) {switch (stepIndex) {case 0: return 'Выбрать настройки кампании ...';вариант 1: вернуть «Что такое группа объявлений?»;case 2: return 'Это бит, который меня действительно волнует!';по умолчанию: return 'Uknown stepIndex';}}

класс HorizontalLabelPositionBelowStepper extends React.Component {state = {activeStep: 0,};

handleNext = () => {this.setState (state => ({activeStep: state.activeStep + 1,}));};

handleBack = () => {this.setState (state => ({activeStep: state.activeStep - 1,}));};

handleReset = () => {this.setState ({activeStep: 0,});};

render () {const {classes} = this.props;const steps = getSteps ();const {activeStep} = this.state; 

return (
  <div className={classes.root}>
    <Stepper activeStep={activeStep} alternativeLabel>
      {steps.map(label => {
        return (
          <Step key={label}>
          <StepLabel>{label}</StepLabel>
          </Step>
        );
      })}
    </Stepper>
    <div>
      {this.state.activeStep === steps.length ? (
        <div>
          <Typography className={classes.instructions}>All steps completed</Typography>
          <Button onClick={this.handleReset}>Reset</Button>
        </div>
      ) : (
        <div>
          <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
          <div>
            <Button
              disabled={activeStep === 0}
              onClick={this.handleBack}
              className={classes.backButton}
            >
              Back
            </Button>
            <Button variant="contained" color="primary" onClick={this.handleNext}>
              {activeStep === steps.length - 1 ? 'Finish' : Next'}
            </Button>
          </div>
        </div>
     )}
    </div>
  </div>
);

}}

HorizontalLabelPositionBelowStepper.propTypes = {classes: PropTypes.object,};

экспорт по умолчанию с помощью стилей (стилей (стилей)(HorizontalLabelPositionBelowStepper);

1 Ответ

0 голосов
/ 01 декабря 2018

В случае, если кто-нибудь когда-нибудь застрянет на этом, я нашел хороший учебник на YouTube, за которым вы можете легко следовать.

...