Javascript 如何在react和add/remove类中迭代DOM元素？

我是一个反应新手，无法迭代

div

元素。
这些

div

元素（如代码所示）最初都有一个公共

className=“step”

，但一旦单击按钮

Next

，我希望第一个div有

className=“step current”

。 再次单击

Next

后，第一个div元素应具有

className=“步骤完成”

（删除当前并追加完成），第二个div元素应具有

className=“步骤当前”

在下面的代码中，我能够将类名从

“step”

切换到

“step current”

，但是我面临着遍历div元素和添加或删除类的困难

类导航栏扩展了React.Component{
状态={
addClass:false
}
handleClick=（）=>{
this.setState（{addClass:！this.state.addClass}）；
}
render（）{
让arrowClass=[“步骤”]；
如果（this.state.addClass）{
箭头类推送（“当前”）；
}
返回(
1.
步骤1
2.
步骤二
3.
步骤三
4.
步骤四
5.
步骤5
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);
.current{
字体大小：粗体；
}
.完成{
颜色：#aaa；
}
虽然你可以这样做，但还有一种更具反应性的方式。即使用state来存储要添加的类。因此，当您更改状态（使用setState）时，它将自动重新渲染并设置类

例如

类导航栏扩展了React.Component{
状态={
状态：“当前”
}
handleClick=（）=>{
this.setState（prevState=>{
如果（prevState.status===‘当前’）{
返回{状态：“完成”}
}否则{
返回{状态：“当前”}
}
})
}
render（）{
打招呼
}
不要显式地编写步骤，而是将它们放在一个数组中，然后用一个索引变量记住您在该数组中的位置。下面是对代码进行此操作的最小更改方法（请参阅注释）：


类导航栏扩展了React.Component{
状态={
步骤：[“步骤1”、“步骤2”、“步骤3”、“步骤4”]，
当前：0//{
//转到上一步，注意我们使用setState的回调版本，
//看https://reactjs.org/docs/state-and-lifecycle.html#state-更新可能是异步的
this.setState（（{current}）=>（{current:Math.max（0，current-1）}）；
}
下一步单击=（）=>{
//进入下一步
this.setState（（{steps，current}）=>（{current:Math.min（steps.length-1，current+1）}）；
}
render（）{
//获取步骤和当前索引
const{current，steps}=this.state；
//渲染它们，检查步骤（`index`）相对于`current`的位置`
//并输出相关的类名。
//我把你的“div”改成了有序列表，这样我们就可以自动编号了
返回(
{current}
{steps.map（（步骤，索引）=>
{step}
)}
);
}
}
ReactDOM.render(
,
document.getElementById（“根”）
)；
.current{
字体大小：粗体；
}
.完成{
颜色：#aaa；
}

应该重新考虑整个方法，使用传递的对象数组来渲染和操作数组，或者使用不同类的索引。对于下一个问题，请从代码块开始。@T.J.Crowder谢谢！从今以后我会小心的。@user7098526-它只会帮助您获得好的答案。：-）关键是确保您有一个MCV在可能的情况下（你这样做了，这就是为什么我能够将它转换为一个片段）@user7098526对
.nav
，
.prev
使用
className
属性，而不是
类。下一步
否，这会中断：如果基于现有状态设置状态，则必须使用
setState
的回调版本并使用它传递给您的状态对象。（这对回答问题也没什么帮助，只是把所有的步骤都放在一起。）此外，这至少是一个半职业化的环境。请不要用孩子或短信说“想”。这是“想”@Kashif Siddiqui每个div都是不可点击的，我在底部有一个单独的
Next
按钮。这并不能解决我的问题哦，是的，它也可以是一个按钮。重要的是在元素
className={“step”+This.state.status}
@MuraliKrishna-Doh！谢谢，修复了！（和
class
=>
className
）@T.J.Crowder知道如何应用范围检查吗？@user7098526-只需在
setState
回调中进行检查（
Math.min
和
Math.max
），例如，我尝试过这样做
（{current}）=>（{current}@user7098526-如果您只有四个步骤，它们是索引0、1、2和3，因此

class NavBar extends React.Component{
    state = {
        status: "current"
    }
    handleClick=()=>{
        this.setState(prevState=>{
            if(prevState.status === 'current'){
                return {status:"done"}
            }else{
                return {status:"current"}
            }
        })

    }
    render(){
        return <button className={"step " + this.state.status} onClick={this.handleClick}>Hello</button>
    }