React 实现 Step组件

简介

        本文将会实现步骤条组件功能。步骤条在以下几个方面改进。

        1、将url与Step组件绑定，做到浏览器刷新，不会重定向到Step 1

        2、通过LocalStorage 存储之前的Step，做到不丢失数据。

实现

 Step.jsx (组件)

import {useEffect, useState} from "react";

export const Step = ({name, data})=>{
    const submit = (event)=>{
        event.preventDefault();
       const local =  localStorage.getItem(name);
       console.log(JSON.parse(local))
    }

    const [current, setCurrent] = useState(0);
    useEffect(()=>{
        let paths = window.location.pathname.split('/');
        setCurrent(parseInt(paths[paths.length - 1]));
    }, [])

    return (
        

            

                

                {
                    data.map((item, idx) =>{
                        return {item.name + ((idx === current) ? '√':'')};
                    })
                }
                
            
            

                {data[current].content}
            
            

                {current > 0 && setCurrent(current-1)}>pre}
                {current + 1 < data.length &&  setCurrent(current+1)}>next}
                {current === data.length - 1 && 提交}
            
        

    );
}

1. Step会获取浏览器url中的步骤数，并设置Step-Content。

2.表单在最后一个步骤会有提交按钮，会从local storage中获取表单参数

3.step header 是导航栏， step content是具体的内容，step footer为步骤条操作按钮。

app.jsx (使用)

unction App() {
   const stepName = 'Demo';
   const Step1 = ()=>{
       const local = localStorage.getItem(stepName);

       const [username, setUsername] = useState(local ? local.username:'');
       const change = (event)=>{
           setUsername(event.target.value);

           localStorage.setItem(stepName, JSON.stringify({
               username: event.target.value
           }));
       }

       return <>
           用戶名:
       ;
   }
   const steps = [
       {
           name: "步驟1",
           content: 
       },
       {
           name: "步驟2",
           content: (2号)
       }
   ]
    return 
}

export default App;

1.Step1组件需要将表单数据与localStorage绑定