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

以多步形式

1 个答案: