Question

我有5个这样的清单项目，即自我，父母，兄弟姐妹，亲戚，朋友。单击任何项目，我将添加一个名为active-option的类。下面是我的代码，到目前为止我所做的。需要注意的是，我是React JS的新手。

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 = { addClass: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ addClass: !this.state.addClass });
  }

  render() {

    let selectOption = ["option"];
    if (this.state.addClass) {
      selectOption.push("active-option");
    }

    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>

                <div className="data__block">

                    <div className="step-1">
                     <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} className={selectOption.join(" ")}>
                                        {profileCreatedBy}
                                  </div>
                               </Col>;
                        })}
                      </Row>
                    </div>

                    <Row className="text-center">
                      <Col xs={12} className="text-center">
                      <Button href="#"  bsStyle="primary" className="m-t-96 m-b-16 has-box__shadow" >
                            Continue
                      </Button>

                      </Col>


                    </Row>
                </div>

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

export default Register;

我正在使用地图功能来显示所有项目。我试图将一个名为active-option的类添加到option。但是点击任何项目也会将该类添加到其他项目中。（附）任何建议？我想将active-option类添加到click事件发生的那个，而不是每个其他元素。兄弟姐妹不应包含活动选项类。请帮忙！

Answer 1

您可以通过将活动项ID保持在组件状态来实现此目的，例如：

class Test extends React.Component{
    constructor(){
        super();
        this.state = {
            activeId: null
        }
        this.setActiveElement = this.setActiveElement.bind(this);
    }
    setActiveElement(id){
        this.setState({activeId: id})
    }
    render(){
        return(
            <div>
                {
                    [1,2,3,4,5].map((el, index) => 
                        <div className={index === this.state.activeId? "active" : ""} onClick={() => this.setActiveElement(index)}>click me</div> 
                    )
                 }
            </div>
        )
    }
}

https://jsfiddle.net/69z2wepo/85095/

将类添加到React JS中发生Clicked事件的元素

1 个答案: