Question

我的React-Admin应用程序中的表格很长。我想将表单元素添加到步进器中。

在Material-UI中，他们提供了Steppers

的示例

需要协助的ID是

如何在步进功能中添加组件

getStepContent（）

如何将所有输入组件包装成表格
如果ine步骤中的表单未通过验证，请避免进入下一步。

function getStepContent（stepIndex）{   切换（stepIndex）{     案例0：        返回“选择广告系列设置...”；     情况1：       返回“仍然是什么广告组？”；     情况2：       返回“这是我真正关心的一点！”     默认：       返回'Uknown stepIndex'；   } }

class HorizontalLabelPositionBelowStepper扩展了React.Component {   状态= {     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 = { 类：PropTypes.object， };

导出默认withStyles（styles（HorizontalLabelPositionBelowStepper）;

Answer 1

万一有人陷入困境，我在youtube上发现了一个不错的tutorial，您可以轻松地跟随它。

如何在React-Amin创建组件

1 个答案: