how to toggle active class in 2 elements react

Question

im trying to toggle active class when you click on a card , for some reason its only working for the first div i have and not working for the second div element. basicly it should remove the box class and add active class when you click on the div element , however when i click on the second div it affects the style of the first div element instead. ANy help is greatly appreciated!

class RegisterForm extends React.Component {


  constructor(props) {

    super(props);
    this.handleClick= this.handleClick.bind(this);

    this.handleClick2= this.handleClick.bind(this);
    this.state = {
      active: false,
      active2: false
  };

  }

  handleClick(){

  this.setState({ active: !this.state.active });
  console.log(this.state.active);

  }


  handleClick2(){

    this.setState({ active2: !this.state.active2 });
    console.log(this.state.active2);

  }
  render() {
    const { form } = this.props

    return (
      <div>
        {' '}
        <h1 id={styles.n}> Get started Today </h1>
        <h5 id="f">No credit card required </h5>
        <br />
        <br />

        <div className="container">
          <div className={this.state.active ? styles.active : styles.box} onClick={this.handleClick} onKeyDown={this.handleClick} role="presentation">
            <span className={styles.cont}>
              <i className="fa fa-rocket" />.
            </span>

            <h3>Organization</h3>

            <p className={styles.expand}>
              <span className="plus">full access to all settings</span>
              <span className="minus">-</span>
            </p>
          </div>

          <div className={this.state.active2 ? styles.active : styles.box} onClick={this.handleClick2}>
            <span className={styles.cont}>
              <i className="fa fa-edit" />.
            </span>

}

Answer 1

您将this.handleClick函数绑定到this.handleClick函数中的this.handleClick2 。