react步骤条

小灰灰 2022-02-24 17:22 383阅读 0赞

一、使用组件@material-ui/core/Stepper

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

有时间再把代码提交上来

npm install @material-ui/core

App.js

import React, { Component } from "react";
    import Step1 from "./Step1";
    import Step2 from "./Step2";
    // import Step3 from "./Step3";
    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 [
        "one step",
        "two step"
      ];
    }
    
    function getStepContent(stepIndex) {
      switch (stepIndex) {
        // case 0:
        //   return "Step1";
        // case 1:
        //   return 'What is an ad group anyways?';
        case 0:
          return <Step1 />;
        case 1:
          return <Step2 />;
        default:
          return "Unknown stepIndex";
      }
    }
    
    class App 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>
        );
      }
    }
    // export default App;
    export default withStyles(styles)(App);

Step1.js

import React, { Component } from 'react';
    class Step1 extends Component {
      render() {
        return (
          <div>Step1</div>
        );
      }
    }
    
    export default Step1;

Step2.js

import React, { Component } from 'react';
    class Step2 extends Component {
      render() {
        return (
          <div>Step2</div>
        );
      }
    }
    
    export default Step2;

出现报错：<div> cannot appear as a descendant of <p>

二、强烈推荐antd的步骤条组件

具体实现可以查看[https://blog.csdn.net/qq\_37815596/article/details/85067367][https_blog.csdn.net_qq_37815596_article_details_85067367]

*  Steps

![20201020230223765.png][]

两种方法

方法一：

import React, { Component } from "react";
    import './App.css';
    import { Steps } from "antd";
    import "antd/dist/antd.css";
    const Step = Steps.Step;
    const steps = [{
      title: '第一步',
      description: '描述一'
    }, {
      title: '第二步',
      description: '描述二'
    }, {
      title: '第三步',
      description: '描述三'
    }].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Steps current={1}>{steps}</Steps>
          </div>
        );
      }
    }
    export default App;

方法二：

import React, { Component } from "react";
    import './App.css';
    import { Steps } from "antd";
    import "antd/dist/antd.css";
    class App extends Component {
      render() {
        return (
          <div className="App">
            <Steps current={1}>
              <Steps.Step title="第一步" description="描述一"></Steps.Step>
              <Steps.Step title="第二步" description="描述二"></Steps.Step>
              <Steps.Step title="第三步" description="描述三"></Steps.Step>
            </Steps>
          </div>
        );
      }
    }
    export default App;

实际项目中使用

import React, { Component } from "react";
    import StepOne from "./stepOne";
    import StepTwo from "./stepTwo";
    import StepThree from "./stepThree";
    import { Steps, Button } from "antd";
    import "antd/dist/antd.css";
    function getSteps() {
      return [
        "step one",
        "step two",
        "step three"
      ];
    }
    class App extends Component {
      state = {
        activeStep: 0
      };
      getStepContent(stepIndex) {
        switch (stepIndex) {
          case 0:
            return <StepOne />;
          case 1:
            return <StepTwo />;
          case 2:
            return <StepThree />;
          default:
            return "Unknown stepIndex";
        }
      }
      handleNext = () => {
        if (this.state.state === 2) {
          this.setState({ activeStep: 0 })
        } else {
          this.setState({ activeStep: this.state.activeStep + 1 })
        }
      };
      handleBack = () => {
        this.setState({ activeStep: this.state.activeStep - 1 })
    
      };
      render() {
        const steps = getSteps();
        const { activeStep } = this.state;
        return (
          <div style={
       { paddingTop: 70 }}>
            <Steps size="small" current={activeStep}>
              {steps.map(label => (
                <Steps.Step key={label} title={label}></Steps.Step>
              ))}
            </Steps>
            <div>
              {this.getStepContent(activeStep)}
              {
                activeStep > 0 && activeStep <= 2 ?
                  <Button
                    disabled={activeStep === 0}
                    onClick={this.handleBack}
                  >
                    Back
                  </Button> : null
              }
              <Button
                variant="contained"
                color="primary"
                onClick={this.handleNext}
              >
                {activeStep === 2
                  ? "Finish"
                  : "Next"}
              </Button>
            </div>
          </div>
        );
      }
    }
    export default App;

stepOne；stepTwo；stepThree这三个页面这里就不展示了，省略

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220224/855acbc088ad44c6872971f123ca7d13.png
[https_blog.csdn.net_qq_37815596_article_details_85067367]: https://blog.csdn.net/qq_37815596/article/details/85067367
[20201020230223765.png]: /images/20220224/e37317ede4664eec873e58beee3d2da0.png