javascript - 如何在 React 中遍历 DOM 元素并添加/删除类？

Question

我是 react 初学者，我无法遍历 div 元素。
每个 div 元素(在代码中显示)都有一个共同点className="step" 最初但是一旦单击按钮 Next 我希望第一个 div 具有 className="step current" 。再次单击 Next 后，第一个 div 元素应具有 className="step done"(删除当前并附加完成)，第二个 div 元素将具有 classname="step当前”

我能够在下面的代码中将类名从 "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 和 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>

显然，这只是展示了基本方法，您需要对其进行修改。如果您有除步骤文本之外的任何信息，您可以将数组条目设为对象而不仅仅是字符串。

(注意:仅当您不在步骤数组。)

---

旁注:如 Murali Krishna pointed out ，您在包含上一个/下一个链接的 div 和那些链接上有 class 而不是 className；我已将它们更改为上面的 className。