如何将事件侦听器添加到组件内部的模板

Question

我正在使用react-bootstrap-multiselect软件包进行多选下拉列表。 https://github.com/skratchdot/react-bootstrap-multiselect/blob/master/dist/bootstrap-multiselect.js

我正在使用模板提供的属性，这些属性允许我们为组件的每个部分定义自己的DOM。

我使用模板在下拉列表中添加了一个按钮，但无法为其添加事件监听器。

尝试使用componentDidMount（）中按钮的DOM ID添加addEventListener，但每次单击均未调用事件驱动函数。

使用DOM ID添加事件侦听器：

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>',
    }

react-bootstrap-multiselect组件定义：

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