济南正规网站制作品牌,专业的移动网站建设公司,网站怎么做架构图,绵阳网站建设联系电话简介 本文将会实现步骤条组件功能。步骤条在以下几个方面改进。 1、将url与Step组件绑定#xff0c;做到浏览器刷新#xff0c;不会重定向到Step 1 2、通过LocalStorage 存储之前的Step#xff0c;做到不丢失数据。
实现 Step.jsx (组件) import {useEffect, useState} fro…简介 本文将会实现步骤条组件功能。步骤条在以下几个方面改进。 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/divdiv className{Step-Content}{data[current].content}/divdiv className{Step-Footer}{current 0 button onClick{()setCurrent(current-1)}pre/button}{current 1 data.length button onClick{() setCurrent(current1)}next/button}{current data.length - 1 button typesubmit提交/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 htmlForusername用戶名:/labelinput type{text} value{username} onChange{change}//;}const steps [{name: 步驟1,content: Step1/},{name: 步驟2,content: (span2号/span)}]return Step data{steps} name{stepName} /
}export default App;1.Step1组件需要将表单数据与localStorage绑定
