javascript - 当事件步骤更改时，将 StepContent 数据保留在 Material-ui Stepper 中

Question

我有一个 Stepper，它有多个步骤，每个步骤都包含许多 TextField。现在，当您更改步骤时，material-ui 会卸载步骤内容，因此 TextField 中的所有数据都将丢失。

现在我的问题:

当我们更改步骤时，是否可以保留/保存 TextField 中的数据？

我不想:

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

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

        <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
• react :15.3.0
• 浏览器:Chrome 52.0.2743.116

Answer 1

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

所以你的步进器容器可能看起来像这样:

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 应用程序时，它们似乎经常出现，而且管理起来很麻烦。