我在 NextJs 应用程序中使用 React-step-progress 包来创建一个具有多步骤进度的表单，在我当前的实现中，进入不同的步骤效果很好。问题是当我想在进入下一步之前验证一些输入字段时。
通过到目前为止我所做的工作，我创建了一个状态
firstScreenValidatedvalidatedfirstScreenValidated当我单击“下一步”按钮时，将调用第 1 步的验证器函数，为了尝试，我明确将
firstScreenValidatedvalidated但我发现，即使状态
firstScreenValidated这是我的实现：
import Head from 'next/head'
import { Form,Button, Container, Row, Col } from 'react-bootstrap'
import InputGroup from 'react-bootstrap/InputGroup';
import homeStyles from '@/styles/Home.module.css'
import StepProgressBar from 'react-step-progress';
import 'react-step-progress/dist/index.css';
export default function Home() {
const [firstScreenValidated, setFirstScreenValidated] = useState(false);
const firstScreenValidator = () => {
setFirstScreenValidated(true); // changing the value to true explicitly
return false;
}
return (
<>
<Head>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Container fluid>
<Row className={`${homeStyles.bg_blue}`} style={{height: '100px'}}><h1>{`${firstScreenValidated}`}</h1></Row>
</Container>
<Container>
<Row>
<Col md={2} xs={0}></Col>
<Col md={8} xs={12} className='bg-light border'>
<StepProgressBar labelClass={homeStyles.step_label} wrapperClass={homeStyles.step_content} startingStep={0} onSubmit={()=> console.log("Submitted")} steps={
[
{
label: 'Identity',
name: 'step 1',
validator: firstScreenValidator,
/** Step 1 Content **/
content: <Form id="form_screen_1" noValidate method="POST" validated={firstScreenValidated}>
<h1>{`${firstScreenValidated}`}</h1>
<Row>
<Col>
<Form.Group className={`my-3 mx-2 ${homeStyles.form_input}`}>
<Form.Label className='fw-bold'>{"full Name"}</Form.Label>
<Form.Control required={true} type="text" className={`${homeStyles.form_input}`} placeholder={"Please Enter your name"}/>
<Form.Control.Feedback type="invalid">{"Please Provide Your full name "}</Form.Control.Feedback>
</Form.Group>
</Col>
</Row>
</Form> ,
/** Step 1 Content End **/
},
{
label: 'Visa',
name: 'step 2',
content: <SecondScreen />,
},
{
label: 'Upload',
name: 'step 3',
content: <ThirdScreen />
}
]
} />
</Col>
<Col md={2} xs={0}></Col>
</Row>
</Container>
</>
)
}
任何解决这种情况的指导将不胜感激。谢谢
我们有同样的问题，我实际上正在解决这个问题，并且我在不同的组件中使用每个步骤。看来我们无法访问验证器更新的值。 我认为这是关于库react-step-progress的一个问题。