当主动步骤更改时，在Material-ui步进器中保留StepContent数据

Question

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

现在我的问题：

反正是有保留/保存在TextField S中的数据，而我们正在改变步骤？

我不想：

• 使用终极版救我的窗体的状态
• 使用任何第三方库，例如终极版形式
• 保存文本输入DATAS在父组件（步进）

这里是我的垂直步进，没有什么特别的：

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

我使用：

• 材质的UI：0.15.4
• 阵营：15.3.0
• 浏览器：Chrome的52.0.2743.116

Answer 1

我很做某事与你类似。可能有更好的办法，但我所做的是向我的StepContent子项添加一个“onChange”处理程序，该子项返回一个具有id和value的对象，然后我可以跟踪包含stepper的组件。

所以你的步进容器可能是这样的：

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}); 
} 

我没有挖成终极版或者类似的还，但也许这将是一个更好的方式来处理这样的事情。当我创建React应用程序时，他们似乎经常弹出，而且管理起来很麻烦。