如何在 React js 中的 javascript 中添加點擊事件監聽器？

Question

您能否幫助如何在不使用react - onClick attribute的情況下在react-project中添加click事件偵聽器。 我只想使用本機 javascript。

我試過這樣

document.addEventListener("DOMContentLoaded", function (event) {
  console.log("====");
  console.log(document.querySelector(".btn"));
  document.querySelector(".btn").addEventListener(
    "click",
    function () {
      alert("-----");
    },
    false
  );
});

它不工作警報沒有顯示。你能幫我解決我做錯的地方嗎？

https://codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js:76-340

我知道使用react we can acheive this but I don't want to use reactjs click event我想使用原生 javascript 並更新 state。

當我使用 dangerouslyInsertHTML 時，以下解決方案不起作用

這是我的代碼https://codesandbox.io/s/angry-shadow-1c4v8?file=/src/App.js

Answer 1

你必須在 React Hooks 中注冊事件監聽器

嘗試這個

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  const buttonEl = useRef(null);
  useEffect(() => {
    console.log(counter);
  }, [counter]);

  useEffect(() => {
    const alertFunc = function () {
      alert("-----");
    }
    const buttonRef = buttonEl.current;
    buttonRef.addEventListener(
      "click",
      alertFunc,
      false
    ); 
    // Specify how to clean up after this effect:
    return function cleanup() {
      buttonRef.removeEventListener("click", alertFunc, false)
    };
  })
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button className="btn" ref={buttonEl}> set countor</button>
    </div>
  );
}

我在鈎子中注冊監聽器，當組件卸載時我刪除監聽器