如何激活被访问的步骤? [英] How to make the visited step active?
问题描述
我正在制作一个简单的react应用程序，其中包含
与步进相关的适当代码:
const形式=()=>{...const [currentPage，setCurrentPage] = useState(1);const section = [{title:'Basic Details'，onClick:()=>setCurrentPage(1)}，{title:'Employment Details'，onClick:()=>setCurrentPage(2)}，{title:'Review'，onClick:()=>setCurrentPage(3)}，];<步进步骤= {sections}activeStep = {currentPage}activeColor =红色".defaultBarColor =红色".completeColor =绿色".completeBarColor =绿色"；/>...} 重现问题的步骤:
->共有三个步骤 1,2,3 ，每个步骤都有不同的部分，例如基本详细信息，就业详细信息和审查分别.
->现在，如果用户在步骤1中输入任何一个输入字段，然后转到步骤2，并在其中填写一些输入字段，然后转到步骤3进行查看，并且如果他再次返回到步骤1，则在步骤3中将丢失活动状态
->因此，现在问题是，如果我们要转到步骤3，则需要再次走三步才能到达最后的步骤3.
要求:
->如果用户曾经访问过任何步骤，那么如果他访问了先前的任何步骤，那么他先前访问的所有步骤都必须处于活动状态.
例如:
->如果用户进入 Step 1 ，然后使用下一步"按钮，他将进入 Step 3 ，并且如果他希望返回到 Step1 进行修改一些输入，如果他想转到第3步进行审核，则应该可以通过单击第3步，因为他已经访问了该步骤.
请帮助我获得使用户访问的步骤处于活动状态的结果.如果用户访问步骤3并单击步骤1"圆圈返回到步骤1，则应该有可能返回再次访问步骤3，因为他已经访问了步骤3.
也欢迎任何没有任何库的解决方案.
如果我们还有更多步骤(例如7个步骤)，这将是一个大问题.因此，请帮助我..提前非常感谢..
这是所讨论的< Stepper/> 组件的简单实现.关键是要有一个 tracker 来在内部跟踪所访问的步骤，并在重新渲染时保留该信息.
const {useState，useEffect，useMemo} = React;const cx = classNames;函数范围(a，b){返回新的Array(Math.abs(a-b)+1).fill(a).map((v，i)=> v + i);}函数Stepper({steps，activeStep，children}){const count = steps.length;const listOfNum = useMemo(()=> range(1，count)，[count]);const tracker = useMemo(()=> {让highestStep = 0;函数hasVisited(step){返回maximumStep> = step;}函数addToBackLog(step){如果(步长>最高步长)最高步长=步长;}返回 {hasVisited，addToBackLog，getHighestStep(){返回highestStep；}，};}，[]);tracker.addToBackLog(activeStep);const noop =()=>{};const prevStep = steps [activeStep-2];const currentStep = steps [activeStep-1];const nextStep = steps [activeStep];返回 (< div>< div>{"}{listOfNum.map((num，i)=> {const isActive = activeStep == num;const isVisited = tracker.hasVisited(num);const isClickable = num< = tracker.getHighestStep()+ 1 ||isVisited;返回 (÷ div键= {num}className = {cx("circle"，{活动:isActive，访问过:isVisited，clickable:isClickable，})}onClick = {isClickable吗?steps [i] .onClick:noop}>{num} {"}</div>);})} {"}</div> {"}< h2>{currentStep&¤tStep.title}</h2>< div>{children}</div> {"}< div className ="footer">{"}{prevStep?(< button onClick = {prevStep.onClick}>上一页</button>) : 空值}{" "}{下一步 ?< button onClick = {nextStep.onClick}>下一个</button>: 空值}{" "}</div> {"}</div>);}函数App(){const [currentPage，setCurrentPage] = useState(1);const section = [{标题:联合国"，onClick:()=>setCurrentPage(1)，}，{标题:"Deux"，onClick:()=>setCurrentPage(2)，}，{标题:三叉戟"，onClick:()=>setCurrentPage(3)，}，{标题:四合院"，onClick:()=>setCurrentPage(4)，}，{标题:"Cinq"，onClick:()=>setCurrentPage(5)，}，];返回 (<步进步骤= {sections} activeStep = {currentPage}>我的页面是{currentPage} {"}</Stepper>);}ReactDOM.render(< App/> ;, document.getElementById("root")); body {颜色:#0f0035；padding-bottom:2rem;}.圆圈 {显示:inline-flex;高度:2em；宽度:2em;align-items:居中;证明内容:中心；边界半径:50％；背景颜色:浅灰色；保证金:0 0.5em;白颜色;游标:不允许；}.积极的 {背景颜色:rgba(50，50，250)！important;}.visited {background-color:rgba(50，50，250，0.5);}.clickable {光标:指针；}.footer {上边距:1em;显示:flex;证明内容:间隔；} < 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> I am making a simple react application and included react-stepper-horizontal library and things are fine.
Working Example:
Appropriate Code related to stepper:
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"
/>
.
.
.
}
Steps to reproduce issue:
-> There are totally three steps 1,2,3 and each have different sections as Basic Details, Employment Details and Review respectively.
-> Now if user enter any of the input field in Step 1 and goes to Step 2 and fill some input fields there and goes to Step 3 to review it and if he comes back to the Step 1 again then the active state is lost in Step 3.
-> So now issue is if we want to go to step 3 then we need to again go three steps to reach last Step 3.
Requirement:
-> If user once visited any step then if he comes to any previous step then all the steps that he visited previously needs to be in active.
Eg:
-> If user landed in Step 1, then using next button , he reaches the Step 3 and if he wish to come back to Step 1 to modify some inputs and again if he wants to go to Step 3 for review step then it should be possible by clicking on the Step 3 because he already visited that step.
Kindly help me to achieve the result of making the steps in active state upto which the user visits.. If user visits Step 3 and goes back to step 1 on click of the Step 1 circle then there should be possibility to come back to Step 3 again as he already visited the Step 3..
Any solution without any library also welcomed.
This is a big issue if we have more steps (eg 7 steps). So please kindly help me.. A big thanks in advance..
Here's a simple implementation of the <Stepper /> component in question. The key is to have a tracker that tracks the visited steps internally, persist that information across re-renders.
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>
这篇关于如何激活被访问的步骤?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
