私のリアクションスイッチがこのモーダルで動作しないのはなぜですか？

Question

私は4つの異なるステップからなるこのモーダルを構築しようとしています。 私は4つの異なるファイルをモーダルにロードしたいと思います。アプリケーションをロードして最初の画面でボタンを押すと、状態が更新されますが、何らかの理由でコンポーネントが2番目のケースに更新されません。

これは、モーダルのファイルです：

import React, { Component } from 'react'; 
 
import { Row, Col, Checkbox, Radio, ControlLabel, HelpBlock, FormGroup, FormControl, Button, Tabs, Tab } from 'react-bootstrap'; 
 

 
// import AddSparkForm 
 
import AddSparkStep1 from './add-spark-form/add-spark-step-1'; 
 
import AddSparkStep2 from './add-spark-form/add-spark-step-2'; 
 
import AddSparkStep3 from './add-spark-form/add-spark-step-3'; 
 
import AddSparkStep4 from './add-spark-form/add-spark-step-4'; 
 

 
export default class AddSparkModal extends Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.createSpark = this.createSpark.bind(this); 
 
    this.onChange = this.onChange.bind(this); 
 
    this.handleChangeUrl = this.handleChangeUrl.bind(this); 
 
    this.handleChangeContent = this.handleChangeContent.bind(this); 
 
    this.showStep = this.showStep.bind(this); 
 
    this.nextStep = this.nextStep.bind(this); 
 
    this.previousStep = this.previousStep.bind(this); 
 

 
    this.state ={ 
 
     step : 1 
 
    }; 
 
    } 
 

 
    nextStep() { 
 
    this.setState({ 
 
     step : this.state.step + 1 
 
    }) 
 
    } 
 

 
    previousStep() { 
 
    this.setState({ 
 
     step : this.state.step - 1 
 
    }) 
 
    } 
 

 

 
    showStep(){ 
 
    switch (this.state.step) { 
 
     case 1: 
 
     return <AddSparkStep1 nextStep={this.nextStep} 
 
           previousStep={this.previousStep} /> 
 
     case 2: 
 
     return <AddSparkStep2 nextStep={this.nextStep} 
 
           previousStep={this.previousStep}/> 
 
     case 3: 
 
     return <AddSparkStep3 nextStep={this.nextStep} 
 
           previousStep={this.previousStep} /> 
 
     case 4: 
 
     return <AddSparkStep4 nextStep={this.nextStep} 
 
           previousStep={this.previousStep}/> 
 
    } 
 
    } 
 
    
 

 
    render() { 
 
    return (
 
     <div className="background-container"> 
 
     {this.showStep()} 
 
     </div> 
 
    ) 
 
    }

そして、これが私の最初のドキュメントのファイルです：

import React, { Component } from 'react'; 
 
import { Col, Button } from 'react-bootstrap'; 
 

 
export default class AddSparkStep1 extends Component { 
 
\t constructor(props) { 
 
    super(props); 
 

 
    this.nextStep = this.nextStep.bind(this); 
 
    \t } 
 

 

 
    \t nextStep(e){ 
 
    e.preventDefault(); 
 
    console.log('it works till the nextStep'); 
 
    this.props.nextStep(); 
 

 

 
    /* Get values via this.refs 
 
    var data = { 
 
     name  : this.refs.name.getDOMNode().value, 
 
     password : this.refs.password.getDOMNode().value, 
 
     email : this.refs.email.getDOMNode().value, 
 
    } 
 
    this.props.saveValues(data) 
 
\t */ 
 
    \t } 
 
    \t 
 
    \t render(){ 
 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t <h1>Step 1: What is a spark?</h1> 
 

 
\t \t \t <p>some more text</p> 
 

 
\t \t \t <Button className="btn -primary pull-right" onClick={this.nextStep}>Save &amp; Continue</Button> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
}

私は誰かがこれを理解するのを助けることを願っています。

敬具、 ドミニク

Answer 1

上記のコードは、私はちょうどそれを動作させるために自分のサーバーを再起動するために必要な、実際には正しいです。

お返事ありがとうございます。