无法将click事件附加到react组件内的Anchor标签上

Question

下面是我的代码ComponentA.js

组件内的return语句

 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**
     }

}

我是初学者，我尝试了其他方法来绑定click事件，但没有任何解决方法。需要帮助。当用户单击工具提示中带有类.callFunction console.log的锚标记时，应打印。

请注意，我试图将onClick事件添加到锚标记中，这只是ComponentA中的静态内容，并且将通过在ComponentB中的prop.content中获取静态内容来创建工具提示。>

下面是我的代码ComponentA.js return语句，位于组件return内（......

Answer 1

反应成分为synthetic event listeners。您需要做的就是将onClick属性添加到元素中。所以你的看起来像这样：