React实现步骤条引导

React实现步骤条引导

目录

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

1. 功能需求

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

2. 核心代码

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

}, { 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 ( ); }}

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:

}, { 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 (

人工智能安全平台

Home List App

{steps.map(item => ( ))}

{steps[current].content}

{current < steps.length - 1 && ( this.next()}> 下一步 )} {current === steps.length - 1 && ( message.success('Processing complete!')}> 完成 )} {current > 0 && ( this.prev()}> 上一步 )}

); }}export default Attack;

4. 效果展示

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。