Unable to add event listener to button added through template props

[SivalakshmiViswanathan]

Hi, I added a button above filter part and trying to add event listener to it in my react code.

Added event listerner using the DOM id provide for button inside template inside componentDidMount().

The above lifecycle function is getting executed..

But unable to trigger a click or respective event writtern for DOM id (element).

Please suggest some way to acheive this. Template

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

ComponentDidMount:

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

Plain function:

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

Thanks in advance.