在"next“上添加类，在进度条上移除"prev”- React

Question

因此，我想按顺序向这些列表项中的每个项添加一个类，而不是同时按下"Next"，然后在按下“after”之后再删除它们。我的工作是反应，我知道你可以做一些与国家等，但我是新的反应，所以任何帮助都是非常感谢的。

HTML

<ol id="prog" className="progress-track">
                    <li className="progress-1">
                        <div className="icon-wrap"></div>
                        <span className="progress-text">The position</span>
                    </li>

                    <li className="progress-2 test">
                        <div className="icon-wrap"></div>
                        <span className="progress-text">Qualifications</span>
                    </li>

                    <li className="progress-3 test">
                        <div className="icon-wrap"></div>
                        <span className="progress-text2">
                            Abtion as a workplace
                        </span>
                    </li>

                    <li className="progress-4 test">
                        <div className="icon-wrap2"></div>
                        <span className="progress-text3">Apply</span>
                    </li>
                </ol>

如果您需要更多的信息，请告诉我！设计

Answer 1

你需要有一个状态。就像const [activeItem, setActiveItem] = useState(1);

由于您有4个项，您将有四种可能的状态类型。

当您单击每个项目时，您将将状态设置为该项id。例如，当您单击项目3时，您将状态设置为3，并检查您的状态是否等于3，您将为您的className设置一个类。className={example ${activeItem === 1 ? 'active' : ''}}当单击“下一步”时，您只需将1添加到当前状态，然后在单击前一个状态时从状态中减去一个。如果你的状态是4，那就意味着你达到了极限。当用户单击5次将状态设置为1时。