Как добавить прослушиватель событий в шаблоны внутри компонента

Question

Я использую пакет response-bootstrap-multiselect, чтобы иметь раскрывающийся список множественного выбора. https://github.com/skratchdot/react-bootstrap-multiselect/blob/master/dist/bootstrap-multiselect.js

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

Я добавил кнопку в раскрывающемся списке, используя шаблон, но не смог добавить для него прослушиватель событий.

Попытка добавления addEventListener с использованием DOM id кнопки внутри componentDidMount (), но при каждом щелчке это не вызывает функцию, управляемую событиями.

Добавление прослушивателя событий с использованием идентификатора DOM:

componentDidMount() {
    // console.log(document.getElementById("additional-tag"));
    if (document.getElementById('additional-tag')) {
      document
        .getElementById('additional-tag')
        .addEventListener('click', this.myfunc())
    }
  }

Определение функции:

 myfunc() {
    console.log('myfunction')
  }

Шаблон:

let templates = {
      button:
        '<div class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <span class="ppvx_icon ppvx_icon--size_md ppvx_icon-chevron-down"></span></div>',
      filter:
        '<li class="multiselect-item multiselect-filter"><button id="additional-tag" class="additional-tag" type="button" ><span class="glyphicon glyphicon-minus"></span><span class="remove-tag">Remove Tag</span></button><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
    }

Определение компонентаact-bootstrap-multiselect:

<Multiselect
            ref={this.myRef}
            .
            .
            .
            templates={templateData}
/>