无法将点击事件附加到反应组件内的锚标记

Question

下面是我的代码 组件A.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**
     }

}

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

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

Answer 1

React 组件有synthetic event listeners。您需要做的就是将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
       />

);