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 (<form className={'Step'} onSubmit={submit}><div className={'Step-Header'}><div>{data.map((item, idx) =>{return <a key={idx} href= {`/step/${idx}`} style={{paddingRight:30}}>{item.name + ((idx === current) ? '√':'')}</a>;})}</div></div><div className={'Step-Content'}>{data[current].content}</div><div className={'Step-Footer'}>{current > 0 && <button onClick={()=>setCurrent(current-1)}>pre</button>}{current + 1 < data.length && <button onClick={()=> setCurrent(current+1)}>next</button>}{current === data.length - 1 && <button type="submit">提交</button>}</div></form>);
}

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 <><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 App;

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