目录

React 实现 Step组件

简介

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

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

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

实现

Step.jsx (组件)

javascript 复制代码
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 (使用)

javascript 复制代码
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绑定

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
curdcv_po5 分钟前
新手到老鸟😎🚀玩转 React Effect
前端·react.js
患得患失94926 分钟前
【前端】【React】useCallback的作用与使用场景总结
前端·javascript·react.js
Violet51526 分钟前
🎢从零打造React组件库!Rollup+TS+React19保姆级上车指南(一)🚀
react.js·前端框架
曙光就在眼前6 小时前
奋发图强学 React 系列 (二):React 高阶组件(HOC)
前端·react.js
小钰能吃三碗饭6 小时前
第五篇:【React 性能优化秘籍】让你的应用丝滑流畅,告别卡顿!
前端·javascript·react.js
小饼干就是我6 小时前
React V18+下,useEffect()的调度执行时机之我与Deepseek的拉锯战
react.js
女生也可以敲代码7 小时前
如何使用 qrcode.react生成二维码
前端·react.js·typescript
哟哟耶耶7 小时前
React-05React中props属性(传递数据),propTypes校验,类式与函数式组件props的使用
前端·javascript·react.js
智绘前端9 小时前
Vue3的Composition API与React Hooks有什么异同?
前端·vue.js·react.js·前端框架·vue
小满zs12 小时前
React-router v7 第三章(路由)
前端·react.js