如何在 2 个元素中切换活动类反应

Question

当您单击卡片时，我试图切换活动类，出于某种原因，它仅适用于我拥有的第一个 div 而不适用于第二个 div 元素。基本上，当您单击 div 元素时，它应该删除框类并添加活动类，但是当我单击第二个 div 时，它会影响第一个 div 元素的样式。任何帮助是极大的赞赏！

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.handleClick2构造函数中。