React实现步骤条引导

蔚落 2022-10-06 00:59 199阅读 0赞

### 目录 ###

*  1. 功能需求
 *  2. 核心代码
 *  3. 完整代码
 *  4. 效果展示

# 1. 功能需求 #

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

# 2. 核心代码 #

# 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. 效果展示 #

![在这里插入图片描述][20210610162212730.gif_pic_center]

[20210610162212730.gif_pic_center]: /images/20221005/068cb8f67d894ed6a0f7fb592442fcdb.png