当活动步骤发生变化时，将步骤内容数据保存在Material-ui step中

Keep StepContent Data in Material-ui Stepper when active step changes

本文关键字：保存 数据 存在 step Material-ui 活动 变化      更新时间：2023-09-26

我有一个Stepper，它有多个步骤，每个步骤包括许多TextField。现在material-ui卸载步骤的内容，当你改变你的步骤，所以所有的数据在TextField s将丢失。

现在我的问题是:

当我们改变步骤时，是否有办法保持/保存TextField s中的数据?

I don't wanna:

  • 使用redux保存我的表单状态
    • 使用任何第三方库，如redux-form
  • 在父组件(step)中保存文本输入数据

这是我的垂直步进器，没什么特别的:

        <Paper style={{padding: 15, marginRight: 19}}>
            <Stepper activeStep={stepIndex} orientation="vertical">
                <Step>
                    <StepLabel>Personnel Info</StepLabel>
                    <StepContent>
                        <PersonalInfo ref="personalInfo"/>
                        {this.renderStepActions()}
                    </StepContent>
                </Step>
                .
                .
                .
            </Stepper>
        </Paper>

我用:

  • Material-UI: 0.15.4
  • 反应:15.3.0
  • 浏览器:Chrome 52.0.2743.116

我做的事情和你非常相似。可能有一个更好的方法，但我所做的是添加一个"onChange"处理程序到我的StepContent子，返回一个具有id和值的对象，然后我可以在包含StepContent的组件中跟踪。

那么你的步进容器可能是这样的:

class StepperContainer extends Component {
  constructor(props){
    super(props)
    this.state = {
      stepIndex: 0,
    };
    this.handleStepData = this.handleStepData.bind(this);
  }
  handleStepData(data) {
    console.log('data.id',data.id);
    console.log('data.value', data.value);
    this.storeData(data);
  }
  render() {
    <Paper style={{padding: 15, marginRight: 19}}>
        <Stepper activeStep={stepIndex} orientation="vertical">
            <Step>
                <StepLabel>Personnel Info</StepLabel>
                <StepContent>
                    <PersonalInfo ref="personalInfo" onChange={this.handleStepData}/>
                    {this.renderStepActions()}
                </StepContent>
            </Step>
            .
            .
            .
        </Stepper>
    </Paper>

和你的<PersonalInfo>组件将需要一个这样的方法:

handleChange(event, index, id, value) {
  .
  .
  .
  (Do some local processing)
  .
  .
  .
  this.props.onChange({value,id});
}

我还没有深入研究Redux或类似的东西，但也许这将是一个更好的方法来处理这样的事情。当我创建React应用程序时，它们似乎经常弹出，管理起来很麻烦。

2021 material UI v5

https://mui.com/components/steppers/性能

<StepContent TransitionProps={{ unmountOnExit: false }} />

相关文章：