React實現Step組件的示例代碼

更新時間：2024年01月04日 10:08:50 作者：卡卡舅舅

這篇文章主要為大家詳細介紹了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綁定

到此這篇關于React實現Step組件的示例代碼的文章就介紹到這了,更多相關React Step組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: