使用反应钩子的多步骤形式

Question

我正在做一个项目。 我在实施某些事情时遇到了挑战。

我有四个箭头来显示“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

Answer 1

您可以使用与更改样式相同的变量，具体取决于您所在的页面，与在组件之间切换相同，但在这种情况下，您将添加一个额外的条件来检查该页面是否小于当前页面，如果较少是因为仍然不活动或不完整，但较多是因为已完成：

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