ステップ間のステップステップアプリケーションフォーム

Question

私は反応が新しく、各ステップからデータを収集し、最後にそのデータを使用してレポートを生成するウィザードアプリを開発しています。

親コンポーネントを1つ使用し、子プロセスとしてステップをアタッチしましたが、データを読み込むだけで、操作を行うステップからデータを取得する方法がわかりません。

フローは次のようになります。

<StepsForm> 
    <StepOne/> 
    <StepTwo/> 
    <StepThree/> 
</StepsForm> 

は私が垂直移動する必要がありますか？ 3つのステップで

<StepsForm> 
    <StepOne> 
    <StepTwo> 
     <StepThree/> 
    </StepTwo> 
    </StepOne> 

は良い音が、私は将来的にはより多くのステップを追加する場合は混乱になり、アプリはすでに水平流と協力しています。

私は、この例の上に働いている：https://ant.design/components/steps/

のみコンポーネントとコンテンツの文字列を置き換えます。

ちょうど子供の小道具として状態を渡してみましたが、子どもからの変更はしていませんでした。

助けが必要です。私のコードの

チャンク：

FormComponent

constructor() { 

    super(); 
    this.state = { 
     customers: [], 
     selectedCustomer: "", 
    }; 
    } 

<StepOne customers={this.props.customers} selectedCustomer={this.state.selectedCustomer} /> 

は、StepOne

export default class StepOne extends Component { 
    setClient(value, option){ 
    this.props.selectedCustomer = "debug" //fails 
... } 

<Select 
... onSelect={this.setClient} 
     > 

ありがとう！

Answer 1

第1のアプローチは間違いなく、第2のアプローチはさらに痛みを引き起こすでしょう。

基本的には、関数を子（ステップ）に渡して、親の状態（値）を更新することができます。

これについて知るには、他の人がどのように行っているかを調べるのが良い方法です。私は自分自身を最初に書いて、これを見つけた、https://www.npmjs.com/package/react-stepzilla私は自分の目的のために採用し、フォークアップした。

もう1つ候補がありますが、もう少し簡単です https://www.npmjs.com/package/react-step-wizardです。

他人のコードを使用することは悪いことではありません。重要なことは、どのように動作するかを知ることです。また、オープンソースコンポーネントを使用または適応させる作業を省くこともあります。

Answer 2

私はMikkelの答えを高く評価しており、将来的にはより堅牢なソリューションを検討するつもりですが、これまでにいくつかの記事を組み合わせてこれを達成しなければなりませんでした。

Ant DesignステップのAnt Designオートコンプリート要素を使って、状態を変更して他のことを同時に行う必要がありました。

キーラインは次のとおりです。

StepsFormJSX

constructor() { 
    super(); 
    this.state = { 
     customers: [], 
     selectedCustomer: "", 
    }; 
    } 
    changeButtonState(event) { 
     this.setState({selectedCustomer: event.props.item}) 
    } 

<StepOne 
buttonClick={this.changeButtonState.bind(this)} 
customers={this.props.customers} 
selectedCustomer={this.state.selectedCustomer} /> 

StepOne.jsx

setClient(value, option){ 
    //doing another stuff 
    const name = option.props.children 
    } 
    <AutoComplete 
    style={{ width: 200 }} 
    placeholder="Insert" 
    onSelect={(option, value) => this.setClient(option,value,this.props.buttonClick(value) )}> 
    {children} 
    </AutoComplete>