Question

我是新手，因此无法迭代div元素。
这些div元素（如代码所示）中的每个元素最初都有一个公用的className="step"但是一旦单击按钮Next，我希望1 div具有className="step current"。再次单击Next后，第一个div元素应具有className="step done"（删除当前内容并完成附加操作），第二个div元素应具有classname="step current"

在下面的代码中，我能够将className从"step"切换到"step current"，但是我面临遍历div元素以及添加或删除类的困难。

class NavBar extends React.Component{
    state = {
        addClass : false
    }
    handleClick=()=>{
        this.setState({addClass: !this.state.addClass});
    }
    render(){
        let arrowClass = ["step"];
        if(this.state.addClass){    
            arrowClass.push("current");
        }
        return(
            <div id="navbar-div">
                <div className="arrow-steps clearfix">
             1.       <div className={arrowClass.join(' ')}>
                        <span> Step1</span>
                    </div>
             2.       <div className={arrowClass.join(' ')}>
                        <span>Step2</span>
                    </div>
             3.       <div className={arrowClass.join(' ')}>
                        <span> Step3</span>
                    </div>
             4.       <div className={arrowClass.join(' ')}>
                        <span>Step4</span>
                    </div>
             5.       <div className={arrowClass.join(' ')}>
                        <span>Step5</span>
                    </div>
                </div>
                <div className="nav clearfix">
                    <a href="#" className="prev">Previous</a>
                    <a href="#" className="next pull-right" onClick={this.handleClick}>Next</a>
                </div>
                </div>
        );
    }
}

ReactDOM.render(
  <NavBar />,
  document.getElementById("root")
);

.current {
  font-weight: bold;
}
.done {
  color: #aaa;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

类step, current and done在css文件中定义。

Answer 1

与其明确地编写步骤，不如将这些步骤放入数组中，然后使用索引变量记住您在该数组中的位置。这是使用代码进行最少更改的方法（请参见注释）：

class NavBar extends React.Component{
    state = {
        steps: ["Step1", "Step2", "Step3", "Step4"],
        current: 0 // <== Step1 is the current step
    }
    prevClick = () => {
        // Move to previous step, note we use the callback version of setState,
        // see https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
        this.setState(({current}) => ({current: Math.max(0, current - 1)}));
    }
    nextClick = () => {
        // Move to next step
        this.setState(({steps, current}) => ({current: Math.min(steps.length - 1, current + 1)}));
    }
    render() {
        // Get the steps and the current index
        const {current, steps} = this.state;
        // Render them, checking the position of the step (`index`) relative to `current`
        // and outputting the relevant class name.
        // I changed your `div`s to an ordered list so we get automatic numbering
        return (
            <div id="navbar-div">
                <div>{current}</div>
                <ol className="arrow-steps clearfix">
                    {steps.map((step, index) =>
                        <li key={index} className={`step ${index < current ? 'done' : index == current ? 'current' : ''}`}>{step}</li>
                    )}
                </ol>
                <div className="nav clearfix">
                    <a href="#" className="prev" onClick={this.prevClick}>Previous</a>
                    <a href="#" className="next pull-right" onClick={this.nextClick}>Next</a>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
  <NavBar />,
  document.getElementById("root")
);

.current {
  font-weight: bold;
}
.done {
  color: #aaa;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

很显然，这只是显示了基本方法，您需要对其进行修改。如果除了步骤文本之外还有其他信息，则可以使数组条目对象而不是字符串成为对象。

（注意：只有在不添加/删除步骤数组中的条目的情况下，才能在这些index上将key用作li。）

旁注：作为Murali Krishna pointed out的用户，在包含上一个/下一个链接的div以及这些链接上，您拥有class而不是className；我已将它们更改为上面的className。

Answer 2

尽管您可以做到，但还有一种更像React的方式。那就是使用状态来存储您想要添加的类。因此，当您更改状态（使用setState）时，它将自动重新渲染并设置类。

例如。

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>
    }

如何在react和add / remove类中遍历DOM元素？

2 个答案: