無法將點擊事件附加到反應組件內的錨標記

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

}

我是初學者反應，我嘗試了不同的方法來綁定點擊事件，但沒有任何效果..需要幫助。 當用戶點擊工具提示內的錨標簽時，類 .callFunction console.log 應該被打印出來。

請注意，我正在嘗試將 onClick 事件添加到錨標記，這只是 ComponentA 中的靜態內容，並且將通過在 ComponentB 中的 prop.content 中獲取靜態內容來創建工具提示

Answer 1

React 組件具有合成事件偵聽器。 您需要做的就是將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
       />

);