送信時に複数ステップのフォームで値を収集するにはどうすればよいですか？

Question

私は現在、マルチステップフォームを生成するには、このパッケージを使用しています：https://github.com/Srdjan/react-multistep

私はすべてのデータをつなぎする方法を考え出すされるとのトラブルを抱えている修正の数が、1ビットを作りました一緒に提出します。私は提出時にフィールドの値を受け取り、新しいアイテムを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 } 

を最後の手順であります上記のリンク先のマルチステップパッケージでレンダリングされました。 私が実際にやってみたいのは、マルチステップの親コンポーネント内の個々のフォームコンポーネントに変数を格納することです。親からgetInitialStateメソッドを呼び出す方法はありますか？コンポーネントにrefを追加しようとしましたが、コンポーネントがその "steps" constに配置されているため、React Ownerではないためrefを追加できません。

私はこれがシンプルでなければならないと感じていますが、今私はそれについてどうやって行くのか分かりません。フォームフィールドが別々のコンポーネントに存在するこの種のマルチステップフォームを提出する方法に関するアドバイスはありますか？前もって感謝します。

Answer 1

私は、あなたが上にリンクreact-multistepパッケージに問題が各コンポーネントの状態は、そのコンポーネントに対してローカルに格納されていることである https://www.reddit.com/r/reactjs/comments/4qw4bv/how_to_collect_multistep_form_info_on_submit/

...のreddit上であなたを助けようとした男ですあなたが進歩するにつれて破壊されます。実用的な意味でどのように動作するかは分かりませんので、審美的な面だけでは意味がありません。

見た目がよく、動作させたい場合は、各コンポーネントの状態を共通のストアの上位レベルに保存するように変更する必要があります。この場合は、Multistep componentに状態を取得する必要があります。

このパッケージにはたくさんのフォークがあります。フォークを見れば、誰かがすでにこの作業をしていることがわかります。

しかし、私は、そのパッケージを放棄お勧めしますし、代わりにこのかなり簡単な方法を見てみなければならないと思い... https://www.viget.com/articles/building-a-multi-step-registration-form-with-react