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

Posted 2023-02-22

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

【英文标题】：How to add Material-UI form with Steppers in React-Amin Create Component

【发布时间】：2019-04-26 00:41:18

【问题描述】：

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

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

id喜欢被协助的是

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

getStepContent()

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

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

函数 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);

【参考方案1】：

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