以多步形式反应句柄状态

Question

我试图在React上创建一个多步表单。

现在，我已经有了一个简单的方法来渲染组件并在表单提交后显示另一个组件。

这可以在this Gist（道歉的缩进，Github总是拧它）找到。

我该如何处理多形式表单的状态，如果我想有一个假设父组件Form.js渲染每个表单一步像

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

我已经试过各种NPM模块，但他们似乎没有相处或工作。

有没有一种方法可以获得父表单组件中所有步骤的状态，以便我可以从那里提交数据（并验证每个步骤并在成功提交表单后重置状态）？

这是当前一步法状态代码

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