I have a Stepper which has multiple steps and each step includes many TextFields. Now material-ui unmounts step contents when you change your step, so all the data in the TextFields will be lost.

Now my question :

Is there anyway to keep/save the data in the TextFields while we're changing steps ?

I don't wanna :

• Use redux to save my form's states
• Use any third-party libraries like redux-form
• Save text input datas in the parent ponent (Stepper)

Here's my vertical Stepper, nothing special :

        <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>

I'm using:

• Material-UI: 0.15.4
• React: 15.3.0
• Browser: Chrome 52.0.2743.116

I have a Stepper which has multiple steps and each step includes many TextFields. Now material-ui unmounts step contents when you change your step, so all the data in the TextFields will be lost.

Now my question :

Is there anyway to keep/save the data in the TextFields while we're changing steps ?

I don't wanna :

• Use redux to save my form's states
• Use any third-party libraries like redux-form
• Save text input datas in the parent ponent (Stepper)

Here's my vertical Stepper, nothing special :

        <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>

I'm using:

• Material-UI: 0.15.4
• React: 15.3.0
• Browser: Chrome 52.0.2743.116

• javascript
• reactjs
• material-ui

2 Answers 2

I'm doing something very similar to you. There is probably a better way, but what I have done is to add an "onChange" handler to my StepContent child that returns an object with an id and value, I can then track in the ponent that contains the stepper.

So your stepper container might look like this:

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>

And Your <PersonalInfo> ponent will need a method like this:

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

I haven't dug into Redux or similar yet, but maybe that would be a better way to handle things like this. They seems to be popping up often as I'm creating a React App and it gets cumbersome to manage.

2021 materia ui v5

https://mui./ponents/steppers/#performance

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