爲什麼我的React開關不能在此模式下工作？

我一直在試圖建立這個由4個不同步驟組成的模態。所以我想加載四個不同的文件到模態。當我現在加載我的應用程序並按下第一個屏幕上的按鈕時，我的狀態確實會更新，但出於某種原因，我的組件不會更新到第二種情況。爲什麼我的React開關不能在此模式下工作？

這是模態的文件：

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

我希望有人能幫我解決這個問題。

親切的問候，多米尼克

來源

2017-08-13 Deelux

你的代碼看起來不錯，試試這個：刪除行並檢查'e.preventDefault（）;' –

你在'構造函數'中綁定了幾個不在你的代碼片段中的函數。函數是否失敗，導致nextStep和previousStep不實際綁定？ –

艾艾艾......這其實只是我的愚蠢。一切正常，我只需要重新啓動我的服務器。感謝這些函數的提示，我只是刪除了一些不相關的代碼，這些函數實際上就在那裏。非常感謝！ – Deelux

上面的代碼實際上是正確的，我只需要重新啓動我的服務器爲它工作。

感謝您的快速回復。

來源

2017-08-13 17:06:51 Deelux

爲什麼我的React開關不能在此模式下工作？

回答

相關問題