使用反應鉤子的多步表單

我正在做一個專案。我在實施某些事情時遇到了挑戰。

我有四個箭頭來顯示 Active-Next-Inactive-Completed 表單的進度。應使用箭頭上的不同顏色來區分每種狀態。

然后，當一個人在填寫每個表格后單擊一個按鈕時，該人將被帶到下一頁并且箭頭狀態也應該改變。

我設計了箭頭，創建了 css 樣式，按鈕點擊進入下一頁，但我的挑戰是讓箭頭同時改變。 圖片

import React,{useState} from 'react'
import SelectOption from '../customSelect/SelectOption'
import './arrow.css'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'
import Component4 from './Component4'

const Arrow = () => {

const[page, setPage] = useState(1)

function goNextPage(){
    setPage(page => page   1)
}

function goBackPage(){
    setPage(page => page - 1)
}

const [style, setStyle]=useState(false)

return (
<div className="parent-div">

<div className="arrow-container">
    <div className="arrow-div">
    <div className={style ? "buyToken-completed" : "active" }>
            <p>Component 1</p>
        </div>
    </div>
    <div className="arrow-div">
        <div className={style ? "next" : "active"}>
            <p>Component 2</p>
        </div>
    </div>
    <div className="arrow-div">
        <div className={!style ? "inactive" : "active"}>
            <p>Component 3</p>
        </div>
    </div>
    <div className="arrow-div">
        <div className={style ? "view-receipt-next" : "view-receipt- 
completed"}>
            <p>Component 4</p>
        </div>
    </div>
</div>

    <div className="component-div">
        <div className='display'>
            {page === 1 && <Component1 /> }
            {page === 2 && <Component2 /> }
            {page === 3 && <Component3 />}
            {page === 4 && <Component4 />}
        </div>

        <button onClick={goBackPage} className='btns'>Back</button>
        <button onClick={goNextPage}>Next</button>
    </div>   
 </div>
 )
 }

export default Arrow

uj5u.com熱心網友回復：

您可以使用相同的變數來根據您所在的頁面更改樣式，就像您在組件之間切換一樣，但在這種情況下，您將添加一個額外的條件來檢查頁面是否小于當前頁面更少是因為仍然不活動或不完整，但更多是因為已完成：

import React,{useState} from 'react'
import SelectOption from '../customSelect/SelectOption'
import './arrow.css'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'
import Component4 from './Component4'

const Arrow = () => {

    const[page, setPage] = useState(1)
    
    function goNextPage(){
        setPage(page => page   1)
    }
    
    function goBackPage(){
        setPage(page => page - 1)
    }
    
    const [style, setStyle]=useState(false)
    
    return (
    <div className="parent-div">
    
    <div className="arrow-container">
        <div className="arrow-div">
        <div className={page === 1 ? "active" : "completed" }>
                <p>Component 1</p>
            </div>
        </div>
        <div className="arrow-div">
            <div className={page === 2 ? "active" : (page < 2 ? "inactive" : "completed")}>
                <p>Component 2</p>
            </div>
        </div>
        <div className="arrow-div">
            <div className={page === 3 ? "active" : (page < 3 ? "inactive" : "completed")}>
                <p>Component 3</p>
            </div>
        </div>
        <div className="arrow-div">
            <div className={page === 4 ? "active" : "inactive"}>
                <p>Component 4</p>
            </div>
        </div>
    </div>
    
        <div className="component-div">
            <div className='display'>
                {page === 1 && <Component1 /> }
                {page === 2 && <Component2 /> }
                {page === 3 && <Component3 />}
                {page === 4 && <Component4 />}
            </div>
    
            <button onClick={goBackPage} className='btns'>Back</button>
            <button onClick={goNextPage}>Next</button>
        </div>   
     </div>
     )

 }

export default Arrow

標籤：反应 形式 状态 钩 多重步骤

上一篇：在表單標簽內現場添加屬性框

下一篇：顯示帶有lat的資料陣列，長為標記：react-leaflet