将一个活动类添加到下一个div中，从JS

Question

我是React JS的新手。我有这样的结构。

屏幕上显示带有字段激活选项的field div。接下来有5个此类div，其中包含{＆＃39; field＆＃39;其中aboslute已定位。

点击＆＃34;继续＆＃34;按钮应移动处理click事件，以便将当前的field-active选项删除，并将其添加到下一个。

这是我到目前为止所尝试的内容，我想知道这里的索引是否有任何帮助，或者还有其他更好的方法来实现这一目标。

import React, { Component } from 'react';
import {Grid, Col, Row, Button} from 'react-bootstrap';
import facebook_login_img from '../../assets/common/facebook-social-login.png';

const profilesCreatedBy = ['Self' , 'Parents' , 'Siblings' , 'Relative' , 'Friend'];

class Register extends Component {

  constructor(props) {
    super(props);
    this.state = {
      activeId: null,
      addClass: false
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleClickOfContinue = this.handleClickOfContinue.bind(this);
  }

  handleClick(id) {
    this.setState({activeId: id})
  }

  handleClickOfContinue(){
    this.setState({

    })
  }

  render() {

    return (
        <section className="get-data__block" style={{padding: '80px 0 24px 0'}}>
          <Grid>
            <Row>
              <Col sm={10} md={8} mdOffset={2} smOffset={1}>
                <p className="grey-text small-text m-b-32"><i>
                    STEP 1 OF 6 </i>
                </p>

                <form className="field-form">

                    <div className="field field-active">
                     <p className="m-b-32">This profile is being created by</p>
                      <Row>
                      {profilesCreatedBy.map((profileCreatedBy, index) => {
                       return  <Col className="col-md-15">
                                  <div onClick={() => this.handleClick(index)} className={index === this.state.activeId? "option active-option" : "option"} >
                                        {profileCreatedBy}
                                  </div>
                               </Col>;
                        })}
                      </Row>
                    </div>

                    <div className="field">
                      <p className="m-b-32">This is step 2 with diffrent content</p>
                    </div>

                     <div className="field">
                      <p className="m-b-32">This is step 3 with diffrent content</p>
                    </div>

                    <div className="field">
                      <p className="m-b-32">This is step 4 with diffrent content</p>
                    </div>

                    <div className="field">
                      <p className="m-b-32">This is step 5 with diffrent content</p>
                    </div>

                     <div className="field">
                      <p className="m-b-32">This is step 6 with diffrent content</p>
                    </div>
                </form>

                    <Row className="text-center" style={{marginTop: '220px'}}>

                      <Col xs={12}>
                        <Button href="#" bsSize="small" className="btn-prev" >
                              Previous
                        </Button>
                        <div className="inline-block">
                          <Button href="#"  bsStyle="primary" bsSize="small" className="btn-continue" onClick={() => this.handleClickOfContinue()}>
                              Continue
                          </Button>
                          <p className="small-text grey-text m-t-8"> <i>Or</i> </p>
                        </div>
                      </Col>

                      <Col xs={12}>

                      <Button href="#"  bsStyle="default" className="social-login__btn">

                      <img src={facebook_login_img} alt="facebook login" style={{position: 'relative',left: '-24px',top: '0px'}}/>
                      Register using facebook</Button>
                      </Col>
                    </Row>

              </Col>
            </Row>
          </Grid>
        </section>
    );
  }
}

export default Register;

Answer 1

我认为这应该有所帮助:(假设总共3个步骤）

class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      activeStep: 1
    };
    this.totalSteps = 3;
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    if (this.state.activeStep < this.totalSteps) {
      this.setState({
        activeStep: this.state.activeStep + 1
      });
    } else {
      alert("DONE");
    }
  }
  render() {
    return (
      <div>
        <div className={this.state.activeStep === 1 ? "field active" : "field"}>
          step 1
        </div>
        <div className={this.state.activeStep === 2 ? "field active" : "field"}>
          step 2
        </div>
        <div className={this.state.activeStep === 3 ? "field active" : "field"}>
          step 3
        </div>

        <button onClick={this.handleClick}> Continue </button>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("container"));

div{
  cursor: pointer;
}
.active{
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 2

了解如何实现这一目标：

class Test extends React.Component{
        constructor(){
            super();
        this.state = {
                activeId: 0
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        let next = this.state.activeId === 4? 0 : this.state.activeId + 1;
        this.setState({activeId: next})
    }
        render(){
            let divs = [];
            for (let i=0; i<5; i++){
                divs.push(
                    <div key={i} className={i === this.state.activeId? "field field-active": "field"}>
                        this is step 1
                   </div>
                )
        }
            return(
        <div>
            {divs}
            <button onClick={this.handleClick}> Continue </button>
        </div>
        )
    }
}

https://jsfiddle.net/7f6k8xs3/3/