React实现步骤条引导

1. 功能需求

因项目需求要做一个类似于任务引导的功能，什么意思呢？就是类似于我们去注册一个账号要我们第一步填写什么信息，然后第二部填写什么信息，依次类推。

2. 核心代码

const steps = [
    {
        title: '步骤一',
        content:


            <div  style={{marginTop:30, marginBottom:150, marginLeft:20}}>
                <div>
                    <p >数据集选择</p>
                </div>

                <div >
                    <Select defaultValue="CIFAR10" style={{ width: 200 }} >
                        <Option value="CIFAR100">CIFAR 100</Option>
                        <Option value="CIFAR10">CIFAR 10</Option>
                        <Option value="MNIST">MNIST</Option>
                        <Option value="Adult">Adult</Option>
                        <Option value="Purchase 10">Purchase 10</Option>
                    </Select>
                </div>

            </div>
    },
    {
        title: '步骤二',
        content: 'Second-content',
    },
    {
        title: '步骤三',
        content: 'third-content',
    },
    {
        title: '步骤四',
        content: 'Last-content',
    }
];


class Attack extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            current: 0,
        };
    }

    next() {
        const current = this.state.current + 1;
        this.setState({ current });
    }

    prev() {
        const current = this.state.current - 1;
        this.setState({ current });
    }

    render() {
        const { current } = this.state;
        return (
                    <div>
                        <Steps current={current}>
                            {steps.map(item => (
                                <Step key={item.title} title={item.title}/>
                            ))}
                        </Steps>
                        <div className="steps-content">{steps[current].content}</div>

                        <div className="steps-action">
                            {current < steps.length - 1 && (
                                <Button type="primary" onClick={() => this.next()}>
                                    下一步
                                </Button>
                            )}
                            {current === steps.length - 1 && (
                                <Button type="primary" onClick={() => message.success('Processing complete!')}>
                                    完成
                                </Button>
                            )}
                            {current > 0 && (
                                <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
                                    上一步
                                </Button>
                            )}
                        </div>
                    </div>



        );
    }

}

3. 完整代码

import React from 'react';
import 'antd/dist/antd.css';
import { Layout, Breadcrumb, Steps, Button, message, Select  } from 'antd';
import {Link} from "react-router-dom";
import '../../views/home/home.css'
const { Header, Content, Footer } = Layout;
const { Step } = Steps;
const { Option } = Select;

const steps = [
    {
        title: '步骤一',
        content:


            <div  style={{marginTop:30, marginBottom:150, marginLeft:20}}>
                <div>
                    <p >数据集选择</p>
                </div>

                <div >
                    <Select defaultValue="CIFAR10" style={{ width: 200 }} >
                        <Option value="CIFAR100">CIFAR 100</Option>
                        <Option value="CIFAR10">CIFAR 10</Option>
                        <Option value="MNIST">MNIST</Option>
                        <Option value="Adult">Adult</Option>
                        <Option value="Purchase 10">Purchase 10</Option>
                    </Select>
                </div>

            </div>
    },
    {
        title: '步骤二',
        content: 'Second-content',
    },
    {
        title: '步骤三',
        content: 'third-content',
    },
    {
        title: '步骤四',
        content: 'Last-content',
    }
];



class Attack extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            current: 0,
        };
    }

    next() {
        const current = this.state.current + 1;
        this.setState({ current });
    }

    prev() {
        const current = this.state.current - 1;
        this.setState({ current });
    }





    render() {

        const { current } = this.state;


        return (
            <Layout className='head_Top'>
                <Header className='font_Style'>
                    <p  >人工智能安全平台</p>
                </Header>

                <Content style={{ padding: '0 50px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>
                            <Link to="/home/" style={{color:'black'}}>
                                Home
                            </Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb>


                    <div>
                        <Steps current={current}>
                            {steps.map(item => (
                                <Step key={item.title} title={item.title}/>
                            ))}
                        </Steps>
                        <div className="steps-content">{steps[current].content}</div>

                        <div className="steps-action">
                            {current < steps.length - 1 && (
                                <Button type="primary" onClick={() => this.next()}>
                                    下一步
                                </Button>
                            )}
                            {current === steps.length - 1 && (
                                <Button type="primary" onClick={() => message.success('Processing complete!')}>
                                    完成
                                </Button>
                            )}
                            {current > 0 && (
                                <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
                                    上一步
                                </Button>
                            )}
                        </div>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>人工智能安全平台 ©2021 Created by 广州大学人工智能与区块链学院</Footer>
            </Layout>

        );
    }

}

export default Attack;

4. 效果展示