javascript - 将事件类添加到下一个 div，从 JS 中的当前 div 中删除

Question

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

具有 field-active 选项的 field div 当前显示在屏幕上。接下来有 ​​5 个这样的 div，类为“field”，以 aboslute 定位。

单击“继续”按钮应该移动处理单击事件的方式，它将从当前选项中删除 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>