Я хочу генерировать событие каждый раз, когда я нажимаю кнопку

Question

Я сейчас разрабатываю реакцию. Я создал компонент, который является checkBox и функционирует как массив при каждом нажатии. Но он не работает как обычный jQuery, метод javascript. Я хочу помочьСпасибо

import React, { Component } from 'react';
import $ from 'jquery';

/* CSS */
import '../../style/common/header.scss';

var condiArr = [];
var bActive_length = 0;
var bChildren_length = 
$("input[name=bus_condi]").closest('li').not('.bTypeAll').length;

class condiList extends Component{

  constructor(props){
    super(props);
    this.state = {
        mongoCondiData : []
    };
    this.oneClick1 = this.oneClick1.bind(this);
    this.oneClick2 = this.oneClick2.bind(this);
    this.allClick = this.allClick.bind(this);
    this.allClick1 = this.allClick1.bind(this);
    this.allClick2 = this.allClick2.bind(this);
  }

  oneClick1() {
    $(this).closest('li').addClass('active');
    bActive_length += 1;
    condiArr.push($(this).val());
  }

  oneClick2() {
    bActive_length -= 1;
    $(this).closest('li').removeClass('active');
    var search = condiArr.indexOf($(this).val());
    if(search!=-1){
      condiArr.splice(search,1);
    }
  }

  allClick = (e) => {
    const target = this;
    console.log(e.target);
    console.log(`this : ${this}`);
    console.log(`target : ${target}`);
    (!$('.bTypeAll').hasClass('active')) ?  this.allClick1(e.target) : target.allClick2(e.target);
  }

  allClick1(e) {
    bActive_length = 0;
    condiArr = [];

    console.log(e.target);
    $(e.target).parent('li').addClass('active');
    $("input[name=bus_condi]").parents('li.bType').addClass('active');

    for(var i = 0; i < bChildren_length; i++) {
      bActive_length++;
      condiArr[i] = $('.bType input:eq('+i+')').val();
    }
  }

  allClick2(e) {
    $(e.target).parent('li').removeClass('active');
    $("input[name=bus_condi]").parents('li.bType').removeClass('active');

    for(var j = 0; j < bChildren_length; j++) {
      bActive_length--;
    }
    condiArr = [];
    console.log(condiArr);
  }

  componentDidMount(){
  }

  render(){
    return(
        <div className="floatR">
            <ul className="btns_wrap clearfix mobileOnly">
                <li className="floatL">
                    <button className="toggle_btn mobileOnly"><i><img src={require('img/icon/icon_bus_w.png')} alt="hi"/><img src={require('img/icon/icon_down_arrow_w.png')} alt="hi" className="arrow_icon"/></i></button>
                </li>
                <li className="floatR">
                    <button className="cond_btn popOpenBtn mobileOnly"><i><img src={require('img/icon/icon_book_w.png')} alt="hi"/></i>범례</button>
                </li>
            </ul>
            <ul className="condi_list clearfix">
                <li className="bTypeAll" onClick={this.allClick}>
                    <input type="checkBox" name="bus_condi" id="condi_all" defaultValue="TOTAL"/>
                    <label htmlFor="condi_all"><i><img src={require('img/icon/icon_bus_g.png')} alt="hi"/></i>전체 <span>12</span></label>
                </li>
                <li className="bType">
                    <input type="checkBox" name="bus_condi" id="condi_ing" defaultValue="DRIVING"></input>
                    <label htmlFor="condi_ing"><i><img src={require('img/icon/icon_bus_g.png')} alt="hi"/></i>운행 <span>12</span></label>
                </li>
                <li className="bType">
                    <input type="checkBox" name="bus_condi" id="condi_charge" defaultValue="CHARGING"></input>
                    <label htmlFor="condi_charge"><i><img src={require('img/icon/icon_bus_g.png')} alt="hi"/></i>충전 <span>12</span></label>
                </li>
                <li className="bType">
                    <input type="checkBox" name="bus_condi" id="condi_danger" defaultValue="WARNING"></input>
                    <label htmlFor="condi_danger"><i><img src={require('img/icon/icon_bus_g.png')} alt="hi"/></i>경고 <span>12</span></label>
                </li>
                <li className="bType">
                    <input type="checkBox" name="bus_condi" id="condi_err" defaultValue="ERROR"></input>
                    <label htmlFor="condi_err"><i><img src={require('img/icon/icon_bus_g.png')} alt="hi"/></i>오류 <span>12</span></label>
                </li>
                <li className="bType">
                    <input type="checkBox" name="bus_condi" id="condi_off" defaultValue="OFF"></input>
                    <label htmlFor="condi_off"><i><img src={require('img/icon/icon_bus_g.png')} alt="hi"/></i>오프라인 <span>12</span></label>
                </li>
                <li>
                    <button className="cond_btn popOpenBtn pcOnly"><i><img src={require('img/icon/icon_book_w.png')} alt="hi"/></i>범례</button>
                </li>
            </ul>
        </div>
    );
  }
}

export default condiList;