jquery класс переключения не работает в componentDidMount

Question

Я работаю с компонентом реагирования, который также включает jquery. Но одна из jquery функций toggleClass не работает.

ниже мой код

export default class Dropdown extends Component {
 componentDidMount(){
  $('.dropdown-block button').on('click', (e) => {
    $(e.currentTarget).parent().toggleClass('dropdown-show');
    console.log(e)
  })
 }
 render() {
    return (

        <div className={ this.props.position + " dropdown-block " + this.props.className}>
            {this.props.children}
        </div>              
    );
 }
}

Здесь кнопка, которую нажимают, является дочерним элементом этого компонента, который представлен в этом компоненте {this.props.children}, но класс dropdown-show нигде не добавляется

Answer 1

Попробуйте это:

Вариант использования для кодов и коробки

componentDidMount() {
    $(".dropdown-block>button").on("click", e => {
      $(e.currentTarget)
        .parent()
        .toggleClass("dropdown-show");
      console.log(e);
    });
  }
  render() {
    return (
      <div>
        <div className={" dropdown-block "}>
          <button>Click me</button>
        </div>
      </div>
    );
  }

ИЛИ

componentDidMount() {
    $(".dropdown-block").on("click","button", e => {
      $(e.currentTarget)
        .parent()
        .toggleClass("dropdown-show");
      console.log(e);
    });
  }

ИЛИ

componentDidMount() {
    $(".dropdown-block").find("button").on("click", e => {
      $(e.currentTarget)
        .parent()
        .toggleClass("dropdown-show");
      console.log(e);
    });
  }