如何在 React-Amin 创建组件中使用 Steppers 添加 Material-UI 表单

Question

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

从 Material-UI，他们提供了一个 Steppers 的例子

id喜欢被协助的是

1. 如何将组件添加到步进器的功能中

getStepContent()

1. 如何将所有输入组件包装到一个表单中

2. 如果步骤中的表单未通过验证，请避免进入下一步。

   函数 getStepContent(stepIndex) { 开关（步骤索引）{ 案例0： 返回“选择广告系列设置...”； 情况1： return '到底什么是广告组？'; 案例2： return '这是我真正关心的一点！'; 默认： 返回'未知步骤索引'； } }

   类 Horizo​​ntalLabelPositionBelowStepper 扩展 React.Component { 状态 = { 主动步：0， };

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

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

   handleReset = () => { 这个.setState({ 主动步：0， }); };

   渲染（）{ 常量 { 类 } = this.props; 常量步骤 = 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>
   );
   

   } }

   Horizo​​ntalLabelPositionBelowStepper.propTypes = { 类：PropTypes.object， };

   export default withStyles(styles(Horizo​​ntalLabelPositionBelowStepper);

Answer 1

如果有人对此感到困惑，我在 youtube 上找到了一个不错的 tutorial，您可以轻松地关注它。