使用 React Hooks 的多步表单

Question

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

我有四个箭头来显示表单的进度，该表单处于“活动-下一个-未活动-已完成”状态。应使用不同颜色的箭头区分每个州。

然后当一个人在填写每个表格后点击一个按钮时，这个人将被带到下一页并且箭头状态也应该改变。

我设计了箭头，创建了 css 样式，单击按钮会转到下一页，但我的挑战是让箭头也同时改变。 Image

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

使用 React Hooks 的多步表单

Multi step form using react hooks

reactjs

forms

react-hooks

state

multi-step