Question

我一直在尝试构建这个由4个不同步骤组成的模态。所以我想在模态中加载四个不同的文件。当我现在加载我的应用程序并按下第一个屏幕上的按钮时，我的状态确实会更新，但由于某种原因，我的组件不会更新到第二种情况。

这是模态的文件：

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 {
	constructor(props) {
    super(props);

    this.nextStep = this.nextStep.bind(this);
 	}


 	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)
	*/
  	}
  	
 	render(){
		return (
			<div>
			<h1>Step 1: What is a spark?</h1>

			<p>some more text</p>

			<Button className="btn -primary pull-right" onClick={this.nextStep}>Save &amp; Continue</Button>
			</div>
		)
	}
}

我希望有人可以帮助我解决这个问题。

亲切的问候，星

Answer 1

上面的代码实际上是正确的，我只需重启我的服务器就可以了。

感谢您的快速回复。

为什么我的React开关无法在此模式中工作？

1 个答案: