ハンドルステートを複数ステップ形式で処理する

Question

Reactで複数ステップフォームを作成しようとしています。

今のところ、フォームを送信すると、コンポーネントをレンダリングして別のコンポーネントを表示するワンステップフォームがありました。

これはthis Gistにあります（インデント用の謝罪、Githubはいつもそれをねじ込むでしょう）。

私は、さまざまなNPMモジュールを試してみたのは、親コンポーネント Form.jsが

Form.js -> Step1 (Child of Form) -> Step2 (Child of Step1) -> etc?

などの各フォームのステップをレンダリングしましょう持つようにしたい場合、私は、マルチフォームフォームの状態を処理するにはどうすればよい

、しかし、彼らは一緒にやっていないか働いていないようです。

親フォームコンポーネントのすべてのステップの状態を取得する方法はありますか。そこからデータを送信できます（また、各ステップを検証してフォームを正常に送信した後に状態をリセットすることもできます）。

この

constructor(props) { 
    super(props); 

    this.state = { 
    phone: "", 
    firstname: "", 
    lastname: "", 
    disabled: false, 
    successIsVisible: false 
    } 

    this.handleSubmit = this.handleSubmit.bind(this); 
} 

handleChange(name, value){ 
    let state = this.state; 
    state[name] = value; 
    this.setState({state}); 
} 

現在のワンステップの状態コードである例入力

<input id="lastname" className="form-control" placeholder="Your last name" onChange={this.handleChange.bind(this, 'lastname')} name="lastname" value={this.state.lastname} /> 

Answer 1

あなたはコールバックで親コンポーネントに子供stateアップすることができます：タブがあります

class Parent extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      childsState: null 
     } 
     this.getChildState = this.getChildState.bind(this); 
    } 
    getChildState(childrenName, childrenState){ 
     this.setState({childrenName: childrenState}); //with click Save button in FirstChildren you will get state of this component 
    } 
    render(){ 
     return(
      <FirstChildren getChildState={this.getChildState}/> 
     ) 
    } 
} 

class FirstChildren extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = { 
      data: null 
     } 
     this.saveData = this.saveData.bind(this); 
    } 
    saveData(e){ 
     this.setState({data: e.target.value}) 
    } 
    render(){ 
     return(
      <div> 
       <input type="text" onBlur={() => this.saveData(e)} /> 
       <button onClick={() => this.props.getChildState("firstChildsState", this.state)}> Save </button> 
      </div> 
     ); 
    } 
}