react步骤条

 

https://github.com/jakubzloczewski/react-steps#readlsme

 

https://codesandbox.io/s/3x53wjqqk6

有时间再把代码提交上来

NewAccount.js

import React, { Component } from "react";
import { connect } from "react-redux";
import Step1 from "../../registerSteps/Step1";
import Step2 from "../../registerSteps/Step2";
import Step3 from "../../registerSteps/Step3";
import Step4 from "../../registerSteps/Step4";
import Step5 from "../../registerSteps/Step5";
import Step6 from "../../registerSteps/Step6";
import Step7 from "../../registerSteps/Step7";
// import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";

const styles = theme => ({
  root: {
    width: "90%"
  },
  backButton: {
    marginRight: theme.spacing.unit
  },
  instructions: {
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit
  }
});

function getSteps() {
  return [
    "Confirm Eligibility",
    "Patient Education",
    "Create Patient Account",
    "Mobile App Setup",
    "Sock Activation",
    "At Home Setup"
  ];
}

function getStepContent(stepIndex) {
  switch (stepIndex) {
    case 0:
      return <Step1 />;
    case 1:
      return <Step2 />;
    case 2:
      return <Step3 />;
    case 3:
      return <Step4 />;
    case 4:
      return <Step5 />;
    case 5:
      return <Step6 />;
    case 6:
      return <Step7 />;
    default:
      return "Unknown stepIndex";
  }
}

class Account extends Component {
  state = {
    activeStep: 0
  };

  handleNext = () => {
    this.setState(state => ({
      activeStep: state.activeStep + 1
    }));
  };

  handleBack = () => {
    this.setState(state => ({
      activeStep: state.activeStep - 1
    }));
  };

  handleReset = () => {
    this.setState({
      activeStep: 0
    });
  };

  render() {
    const { classes } = this.props;
    const steps = getSteps();
    const { activeStep } = this.state;

    return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep} alternativeLabel>
          {steps.map(label => (
            <Step key={label}>
              <StepLabel>{label}</StepLabel>
            </Step>
          ))}
        </Stepper>
        <div>
          {this.state.activeStep === steps.length ? (
            <div>
              <Step7 />
              {/* <Typography className={classes.instructions}>
                All steps completed
              </Typography>
              <Button onClick={this.handleReset}>Reset</Button> */}
            </div>
          ) : (
            <div>
              <Typography className={classes.instructions}>
                {getStepContent(activeStep)}
              </Typography>
              <div>
                <Button
                  disabled={activeStep === 0}
                  onClick={this.handleBack}
                  className={classes.backButton}
                >
                  Back
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={this.handleNext}
                >
                  {activeStep === steps.length - 1 ? "Finish" : "Next"}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
const mapStateToProp = state => ({});

const mapDispatchToProp = dispatch => ({});
export default connect(
  mapStateToProp,
  mapDispatchToProp
)(withStyles(styles)(Account));

Step1.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { Checkbox } from "semantic-ui-react";
import "./step.css";
class Step1 extends Component {
  render() {
    return (
      <div className="step step1">
        <p className="checkTitle">Confirm Patient Eligibility</p>
        <div className="checkTotal">
          <Checkbox label="Patient has smartphone" />
        </div>
        <div className="checkTotal">
          <Checkbox label="Patient has home-wifi + password" />
        </div>
        <div className="checkTotal">
          <Checkbox label="Patient has email address" />
        </div>
        <div className="checkTotal">
          <Checkbox label="Clinic has confirmed sock availability" />
        </div>
      </div>
    );
  }
}
const mapStateToProp = state => ({});

const mapDispatchToProp = dispatch => ({});
export default connect(
  mapStateToProp,
  mapDispatchToProp
)(Step1);