如何在提交時以多步驟形式收集值？

Question

我目前正在使用此軟件包生成多步驟表單： https : //github.com/Srdjan/react-multistep

我做了許多修改，但是我遇到的麻煩是弄清楚如何將所有數據整理在一起提交。 我想在提交時獲取字段的值，並使用它將新項目推送到Mongo集合中。

這是一個表單部分的示例，它作為一個單獨的組件完成：

'use strict';
import React, { Component, PropTypes } from 'react'

const store = { title: '', isbn: '', author: '' };

const StepOne = React.createClass ({
  getInitialState() {
    return store
},

handleTitleChanged(event) {
    store.title = event.target.value;
    this.setState(store);

},

handleIsbnChanged(event) {
    store.isbn = event.target.value;
    this.setState(store);

},
handleAuthorChanged(event) {
    store.author = event.target.value;
    this.setState(store)
},

render() {


    return (
        <div key={key}>
            <div className="row">
                <div className="six columns">
                    <label>Title</label>
                    <input className="u-full-width" placeholder="Title"
                           type="text"
                           onChange={this.handleTitleChanged}
                           value={this.state.title}
                           autoFocus/>
                </div>
            </div>
            <div className="row">
                <div className="six columns">
                    <label>ISBN</label>
                    <input className="u-full-width" placeholder="ISBN"
                           type="text"
                           onChange={this.handleIsbnChanged}
                           value={this.state.isbn}/>
                </div>
            </div>
            <div className="row">
                <div className="six columns">
                    <label>Author</label>
                    <input className="u-full-width" placeholder="Author"
                           type="text"
                           onChange={this.handleAuthorChanged}
                           value={this.state.author}/>
                </div>
            </div>
        </div>
    )}
})

export { StepOne }

通過以下方式匯總了許多這些表單步驟組件：

import React, { Component, PropTypes } from 'react';
import { StepOne } from './StepOne.jsx';
import { StepTwo } from './StepTwo.jsx';
import { StepThree } from './StepThree.jsx';



const steps =
[
    {name: 'Step one', component: <StepOne   />},
    {name: 'Step two', component: <StepTwo  />},
    {name: 'Step three', component: <StepThree  />}

];

export { steps }

最后，這些步驟在我上面鏈接的“多步驟”包中呈現。 我真正想做的是從Multi-step父組件中訪問將變量存儲在單個表單組件中的方法。 有沒有一種方法可以從父級調用getInitialState方法？ 我嘗試向組件添加引用，但是由於組件放置在“ steps”常量中，因此我不能添加引用，因為它不是React Owner。

我覺得這一定很簡單，但是我現在不知道如何去做。 關於如何提交這種多步驟表單的任何建議，其中表單字段存在於單獨的組件中？ 提前致謝。

Answer 1

我是試圖在reddit上幫助您的人... https://www.reddit.com/r/reactjs/comments/4qw4bv/how_to_collect_multistep_form_info_on_submit/

您上面鏈接到的react-multistep軟件包的問題在於，每個組件的狀態都存儲在該組件的本地，然后隨着進度的進行銷毀。 我從任何實際意義上都看不到它是如何工作的，因此，它在美學上沒有用。

如果您喜歡它的外觀並希望使其正常工作，則必須對其進行修改，以將每個組件的狀態保存在更高級別的公共存儲中。 在這種情況下，您想要捕獲Multistep組件中的狀態。

該程序包有很多分支，因此，如果您仔細查看這些分支，可能會發現有人已經為您完成了這項工作。

但我建議您放棄該軟件包，而應該看看這種相當簡單的方法... https://www.viget.com/articles/building-a-multi-step-registration-form-with-react