为什么我的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开关不能在此模式下工作？

回答

相关问题