当前位置：首页 > news >正文

React 实现 Step组件

news 来源：原创 2024/5/9 11:08:31

简介

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

步骤条具有以下几个特点

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))// 向后端请求...}const [current, setCurrent] = useState(0);useEffect(()=>{// 处理浏览器刷新情况，重新设置currentlet paths = window.location.pathname.split('/');setCurrent(parseInt(paths[paths.length - 1]));},[])return (// react router<BrowserRouter>// STEP 表单组件<form className={'Step'} onSubmit={submit}>// 头部导航<div className={'Step-Header'}><div>{// 使用navlink跳转data.map((item, idx) =>{return <NavLink onClick ={ ()=> setCurrent(idx)} to= {`/step/${idx}`} style={{paddingRight:30}}>{item.name + ((idx === current) ? '√':'')}</NavLink>;})}</div></div>// 内容，使用react router，做到局部刷新<div className={'Step-Content'}><Routes>{data.map((item,idx) =>{return  <Route path = {`/step/${idx}`}  element = {data[idx].content}/>})}</Routes></div>// 底部表单跳转，使用 navlink跳转<div className={'Step-Footer'}>{current > 0 && <NavLink  onClick ={ ()=> setCurrent(current-1)}  to ={`/step/${current - 1}`}>pre</NavLink>}{current + 1 < data.length && <NavLink   conClick ={ ()=> setCurrent(current+1)}   to ={`/step/${current + 1}`}>next</NavLink>}{current === data.length - 1 && <button type="submit">提交</button>}</div></form></BrowserRouter>);
}

app.jsx (使用)

const App = ()=> {const stepName = 'Demo';// demo Step 1const Step1 = ()=>{const [username, setUsername] = useState('');useEffect(()=>{const local = localStorage.getItem(stepName);if (local && JSON.parse(local).username){setUsername(JSON.parse(local).username);}},[])const change = (event)=>{setUsername(event.target.value);// 向local storage中写入值localStorage.setItem(stepName, JSON.stringify({username: event.target.value}));}return <><label htmlFor='username'>用戶名:</label><input type={'text'}  value={username} onChange={change}/></>;}const steps = [{name: "步驟1",content: <Step1/>},{name: "步驟2",content: (<span>2号</span>)}]return <Step  data={steps} name={stepName} />
}export  default Appexport default App;