如何解决如何在ReactJs中制作步骤向导表单?
我正在制作简历生成应用程序,并且已将这些内容分解为组件。
目前有两个组成部分,
-> BasicDetails
-> EmploymentDetails
完整的工作示例:
https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8
index.js
<form onSubmit={handleSubmit}>
Basic Details:
<br />
<hr />
<BasicDetails />
<br />
<br />
Employment Details:
<br />
<hr />
<EmploymentDetails />
<div className="submit-button">
<button
className="btn btn-primary mr-2"
type="submit"
onSubmit={handleSubmit}
>
Save
</button>
</div>
<pre>{JSON.stringify(value,null,2)}</pre>
</form>
所有组件都在一种形式下,所以我在为整个表单制作步进器组件时面临着困难。
我尝试过的库是:react-stepper-horizontal,但是我无法在其上包装form
。
包括任何其他库也希望获得结果。
要求:
需要实现react-stepper-horizontal
,该表单的形式为包装器,每个组件为步骤。
能否请您帮助我制作水平步骤向导表单,该表单包含每个步骤的组成部分?预先感谢。.
解决方法
我们不必将组件拆分成自己的形式-我们可以使用当前表单来包装Stepper
组件。
假设我们要显示3个部分:
- 基本详细信息
- 就业细节
- 评论
我们可以如下构建代码。想法是仅根据currentPage
状态显示该部分。
希望代码是不言自明的。
import Stepper from 'react-stepper-horizontal';
const Form = () => {
const [value] = React.useContext(FormContext);
const [currentPage,setCurrentPage] = useState(1);
const sections = [
{ title: 'Basic Details' },{ title: 'Employment Details' },{ title: 'Review' },];
const handleSubmit = (e) => {
e.preventDefault();
console.log(value);
};
const next = () => setCurrentPage((prev) => prev + 1);
const prev = () => setCurrentPage((prev) => prev - 1);
return (
<>
<h1>Dynamic Form Fields in React</h1>
<form onSubmit={handleSubmit}>
<Stepper
steps={sections}
activeStep={currentPage}
activeColor="red"
defaultBarColor="red"
completeColor="green"
completeBarColor="green"
/>
{currentPage === 1 && (
<>
<BasicDetails />
<button onClick={next}>Next</button>
</>
)}
{currentPage === 2 && (
<>
<EmploymentDetails />
<div style={{ display: 'flex',justifyContent: 'space-between' }}>
<button onClick={prev}>Back</button>
<button onClick={next}>Next</button>
</div>
</>
)}
{currentPage === 3 && (
<>
<pre>{JSON.stringify(value,null,2)}</pre>
<div style={{ display: 'flex',justifyContent: 'space-between' }}>
<button onClick={prev}>Back</button>
<button onClick={handleSubmit}>Submit</button>
</div>
</>
)}
</form>
</>
);
};
在react-stepper-horizontal文档上了解更多有关受支持的自定义内容。
,我不确定您是否想自己重新构建,否则,请尝试React Albus。它也支持步进和路由。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。