React 实现 Step组件

原创

已于 2024-01-20 11:52:28 修改 · 1k 阅读

文章标签：

#react.js

于 2024-01-01 13:16:35 首次发布

简介

这篇文章将会实现步骤条组件功能。

步骤条具有以下几个特点

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

2、通过LocalStorage 存储之前的Step填充的内容，做到刷新网页不丢失数据。

实现

Step.jsx (组件)

import {BrowserRouter, Routes, Route,NavLink} from "react-router-dom";
import {useEffect, useState} from "react";
export const Step = ({name, data})=>{
    const submit = (event)=>{
       event.preventDefault();
       // 从local storage获取所有数据
       const local =  localStorage.getItem(name);
       console.log(JSON.parse(local))
       // 向后端请求...
    }

    // 获取url页面参数
    const current = usePath();

    return (
        // react router
        <BrowserRouter>
        // STEP 表单组件
        <form className={'Step'} onSubmit={submit}>
            // 头部导航
            <div className={'Step-Header'}>