REACT 多步骤形式:下一步按钮不起作用,第一个圆圈已经是绿色的
REACT Multi steps form : Next button doesn't work and first circle already in green
我是 REACT 的初学者,我正在尝试在 React 中创建一个多步骤表单。如何隐藏第一页的返回按钮(请看图片)。
export default function StepperControl({ handleClick, currentStep, steps }) {
return (
<div className="container mt-4 mb-8 flex justify-around">
<button
onClick={() => handleClick()}
className={`cursor-pointer rounded-xl border-2 border-slate-300 bg-white py-2 px-4 font-semibold uppercase text-slate-400 transition duration-200 ease-in-out
hover:bg-slate-700 hover:text-white ${currentStep === 1 ? " cursor-not-allowed opacity-50 " : ""
}`}
>
Back
</button>
<button
onClick={() => handleClick("next")}
className="cursor-pointer rounded-lg bg-blue-700 py-2 px-4 font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-slate-700 hover:text-white"
>
{currentStep === steps.length - 1 ? "Confirm" : "Next"}
</button>
</div>
);
}
非常感谢您的帮助
我想这就是你需要的。
export default function StepperControl({ handleClick, currentStep, steps }) {
return (
<div className="container mt-4 mb-8 flex justify-around">
{
currentStep > 1 &&
<button
onClick={() => handleClick()}
className={`cursor-pointer rounded-xl border-2 border-slate-300 bg-white py-2 px-4 font-semibold uppercase text-slate-400 transition duration-200 ease-in-out
hover:bg-slate-700 hover:text-white cursor-not-allowed opacity-50`}
>
Back
</button>
}
<button
onClick={() => handleClick("next")}
className="cursor-pointer rounded-lg bg-blue-700 py-2 px-4 font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-slate-700 hover:text-white"
>
{currentStep === steps.length - 1 ? "Confirm" : "Next"}
</button>
</div>
);
}
此外,您应该将 currentStep 作为 number/integer 而不是对象发送。
我是 REACT 的初学者,我正在尝试在 React 中创建一个多步骤表单。如何隐藏第一页的返回按钮(请看图片)。
export default function StepperControl({ handleClick, currentStep, steps }) {
return (
<div className="container mt-4 mb-8 flex justify-around">
<button
onClick={() => handleClick()}
className={`cursor-pointer rounded-xl border-2 border-slate-300 bg-white py-2 px-4 font-semibold uppercase text-slate-400 transition duration-200 ease-in-out
hover:bg-slate-700 hover:text-white ${currentStep === 1 ? " cursor-not-allowed opacity-50 " : ""
}`}
>
Back
</button>
<button
onClick={() => handleClick("next")}
className="cursor-pointer rounded-lg bg-blue-700 py-2 px-4 font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-slate-700 hover:text-white"
>
{currentStep === steps.length - 1 ? "Confirm" : "Next"}
</button>
</div>
);
}
非常感谢您的帮助
我想这就是你需要的。
export default function StepperControl({ handleClick, currentStep, steps }) {
return (
<div className="container mt-4 mb-8 flex justify-around">
{
currentStep > 1 &&
<button
onClick={() => handleClick()}
className={`cursor-pointer rounded-xl border-2 border-slate-300 bg-white py-2 px-4 font-semibold uppercase text-slate-400 transition duration-200 ease-in-out
hover:bg-slate-700 hover:text-white cursor-not-allowed opacity-50`}
>
Back
</button>
}
<button
onClick={() => handleClick("next")}
className="cursor-pointer rounded-lg bg-blue-700 py-2 px-4 font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-slate-700 hover:text-white"
>
{currentStep === steps.length - 1 ? "Confirm" : "Next"}
</button>
</div>
);
}
此外,您应该将 currentStep 作为 number/integer 而不是对象发送。