React 实现 Step组件
2024-01-01 14:33:43
简介
????????本文将会实现步骤条组件功能。步骤条在以下几个方面改进。
? ? ? ? 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绑定
文章来源:https://blog.csdn.net/qq_37011724/article/details/135323553
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!