javascript - 如何使访问的步骤处于活动状态?
问题描述
我正在制作一个简单的反应应用程序并包含react-stepper-horizontal库,一切都很好。
工作示例:
与步进器相关的适当代码:
const Form = () => {
.
.
.
const [currentPage, setCurrentPage] = useState(1);
const sections = [
{ title: 'Basic Details', onClick: () => setCurrentPage(1) },
{ title: 'Employment Details', onClick: () => setCurrentPage(2) },
{ title: 'Review', onClick: () => setCurrentPage(3) },
];
<Stepper
steps={sections}
activeStep={currentPage}
activeColor="red"
defaultBarColor="red"
completeColor="green"
completeBarColor="green"
/>
.
.
.
}
重现问题的步骤:
-> 共有三个步骤1,2,3
,每个步骤都有不同的部分,分别为Basic Details
,Employment Details
和Review
。
-> 现在,如果用户在第 1 步中输入任何输入字段并转到第 2 步并在那里填写一些输入字段并转到第 3 步查看它,如果他再次回到第 1 步,则活动状态将丢失步骤 3。
-> 所以现在的问题是,如果我们想进入第 3 步,那么我们需要再次进行 3 步才能到达最后的第 3 步。
要求:
-> 如果用户曾经访问过任何步骤,那么如果他来到之前的任何步骤,那么他之前访问过的所有步骤都需要处于活动状态。
例如:
-> 如果用户登陆Step 1
,然后使用下一步按钮,他会到达Step 3
并且如果他希望返回Step 1
以修改一些输入,如果他想再次进入Step 3
审查步骤,那么应该可以通过单击来进行,Step 3
因为他已经参观了那一步。
请帮助我实现使用户访问的步骤处于活动状态的结果。如果用户访问第 3 步并在单击第 1 步圆圈时返回第 1 步,那么应该有可能返回第 3 步再次因为他已经访问了步骤 3..
也欢迎任何没有任何库的解决方案。
如果我们有更多的步骤(例如 7 个步骤),这将是一个大问题。所以请帮助我..提前非常感谢..
解决方案
这是相关组件的简单实现<Stepper />
。关键是要有一个tracker
在内部跟踪访问过的步骤,并在重新渲染中保留该信息。
const { useState, useEffect, useMemo } = React;
const cx = classNames;
function range(a, b) {
return new Array(Math.abs(a - b) + 1).fill(a).map((v, i) => v + i);
}
function Stepper({ steps, activeStep, children }) {
const count = steps.length;
const listOfNum = useMemo(() => range(1, count), [count]);
const tracker = useMemo(() => {
let highestStep = 0;
function hasVisited(step) {
return highestStep >= step;
}
function addToBackLog(step) {
if (step > highestStep) highestStep = step;
}
return {
hasVisited,
addToBackLog,
getHighestStep() {
return highestStep;
},
};
}, []);
tracker.addToBackLog(activeStep);
const noop = () => {};
const prevStep = steps[activeStep - 2];
const currentStep = steps[activeStep - 1];
const nextStep = steps[activeStep];
return (
<div>
<div>
{" "}
{listOfNum.map((num, i) => {
const isActive = activeStep == num;
const isVisited = tracker.hasVisited(num);
const isClickable = num <= tracker.getHighestStep() + 1 || isVisited;
return (
<div
key={num}
className={cx("circle", {
active: isActive,
visited: isVisited,
clickable: isClickable,
})}
onClick={isClickable ? steps[i].onClick : noop}
>
{num}{" "}
</div>
);
})}{" "}
</div>{" "}
<h2> {currentStep && currentStep.title} </h2> <div> {children} </div>{" "}
<div className="footer">
{" "}
{prevStep ? (
<button onClick={prevStep.onClick}> prev </button>
) : null}{" "}
{nextStep ? <button onClick={nextStep.onClick}> next </button> : null}{" "}
</div>{" "}
</div>
);
}
function App() {
const [currentPage, setCurrentPage] = useState(1);
const sections = [
{
title: "Un",
onClick: () => setCurrentPage(1),
},
{
title: "Deux",
onClick: () => setCurrentPage(2),
},
{
title: "Trois",
onClick: () => setCurrentPage(3),
},
{
title: "Quatre",
onClick: () => setCurrentPage(4),
},
{
title: "Cinq",
onClick: () => setCurrentPage(5),
},
];
return (
<Stepper steps={sections} activeStep={currentPage}>
I 'm page {currentPage}{" "}
</Stepper>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
body {
color: #0f0035;
padding-bottom: 2rem;
}
.circle {
display: inline-flex;
height: 2em;
width: 2em;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: lightgrey;
margin: 0 0.5em;
color: white;
cursor: not-allowed;
}
.active {
background-color: rgba(50, 50, 250) !important;
}
.visited {
background-color: rgba(50, 50, 250, 0.5);
}
.clickable {
cursor: pointer;
}
.footer {
margin-top: 1em;
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- iphone - 仅在 ionic3 的 iphone x 设备中未正确设置启动文本?
- angular - 从 Ionic 4 中的 jpg 图像中获取 EXIF 数据
- sql-server - 将完整的 JSON 写入 SQL Server 中的文件系统
- python - 熊猫:使用多个条件将值替换为另一个数据框的值
- arrays - 将 3D numpy 数组转换为 3 个索引的列表
- jupyter-notebook - 如何关闭 Colab 的 Playground 模式?
- reactjs - 在两种不同的条件下打开和关闭标签
- sql - 在递归 cte 中处理很多列
- oracle - 使用带有 APPEND 的 SPOOL 时出错
- rust - 如何将期货 0.1 迭代器收集到向量中?