如何解决使用formik-wizard显示步骤位置
我目前正在使用formik-wizard在React应用程序中合并多页表单。我在显示当前步骤数和步骤总数时遇到困难。
到目前为止,总共3个步骤,每个表单页面均显示第1步(共1步)。应该说第1步,共3步,第2步,共3步,等等。
表格包装器:
function FormWrapper({ children,isLastStep,status,goToPreviousStep,canGoBack,actionLabel }) {
const [stepNumber,setStepNumber] = useState(0);
const steps = Children.toArray(children);
const step = steps[stepNumber];
const totalSteps = steps.length;
return (
<>
<p>
Step {stepNumber + 1} of {totalSteps}
</p>
{status && (
<div>
{status.message}
<hr />
</div>
)}
{children}
<Row>
<Col lg={{ span: 9,offset: 3 }} className='onboard__actions'>
<button
type='button'
onClick={goToPreviousStep}
disabled={!canGoBack}
className='onboard_btn onboard_btn-secondary'
>
Previous
</button>
<button type='submit' className='onboard_btn onboard_btn-primary'>
{actionLabel || (isLastStep ? 'Submit' : 'Next step')}
</button>
</Col>
</Row>
</>
);
}
FormWizard:
function FormWizard() {
const handleSubmit = React.useCallback((values) => {
console.log('full values:',values);
return {
message: 'Thanks for submitting!',};
},[]);
return (
<>
<div className='onboard__body'>
<Container>
<FormikWizard steps={steps} onSubmit={handleSubmit} render={FormWrapper} />
</Container>
</div>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。