Не удалось прикрепить событие click к тегу Anchor внутри реагирующего компонента

Question

Ниже приведен мой код ComponentA. js

оператор возврата внутри компонента

 return (
       ......

        <a id="MytoolTip" ......  

       <ComponentB
          content={
            `
            <div class="share_cart_tt">
                  <a 
                  data-automation-id="..."
                  class="callFunction" 
                   > Invite </a>
            </div>
           `
          }
          target={'MytoolTip'}
          closeButton
       />

);

ComponentB. js (это подсказка, которая будет отображаться, когда пользователь нажимает на якорный тег MytoolTip)

.....

class ComponentB extends Component {
  launchModal() {
    console.log("hey its fine");
  }
     ...
      renderContent = () => {
          document.getElementsByClassName('callFunction').
          addEventListener('click', this.launchModal);
      **I am trying to bind click event here but its not working out**
     }

}

Я новичок, чтобы отреагировать, и я пытался различными способами связать событие нажатия, но ничего не получилось .. нужна помощь. Когда пользователь нажимает на тег привязки внутри всплывающей подсказки с классом .callFunction console.log должен быть напечатан.

Обратите внимание, что я пытаюсь добавить событие onClick в тег привязки, который является просто содержимое stati c в ComponentA и всплывающая подсказка будут созданы путем получения содержимого stati c в prop.content в ComponentB

Answer 1

У компонентов React есть syntheti c прослушивателей событий . Все, что вам нужно сделать, это добавить свойство onClick к элементу. Так что ваш будет выглядеть так:

return (
       ......

        <a id="MytoolTip" ......  

       <ComponentB
          content={
            `
            <div class="share_cart_tt">
                  <a 
                  data-automation-id="..."
                  onClick={FunctionToBeCalledWhenClicked}
                  class="callFunction" 
                   > Invite </a>
            </div>
           `
          }
          target={'MytoolTip'}
          closeButton
       />

);