アクティブなステップが変更された場合、StepContentデータをMaterial-UI Stepperに保持

Question

Stepperには複数のステップがあり、各ステップには多くのTextFieldが含まれています。これで、material-uiはステップを変更するときにステップ内容をアンマウントし、TextFieldのすべてのデータが失われます。

は今、私の質問：

たちは手順を変更している間/キープTextField秒でデータを保存するためにとにかくありますか？親コンポーネント（ステッパー）でReduxのフォーム

保存テキスト入力件のデータのようなサードパーティのライブラリを使用し

私のフォームの状態を保存する

• 使用Reduxの：

  私はないたくを行います

ここに私の垂直ステッパー、何も特別です：

 <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
• ブラウザ：クローム52.0.2743.116

Answer 1

、私は非常に何かをやってるのあなたに似ています。おそらくもっと良い方法がありますが、私が行ったことは、 "onChange"ハンドラを私のStepContent子に追加して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 Appを作成しているので、頻繁にポップアップしているようで、管理が面倒です。