reactjs - 如何在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 并更新状态。

当我使用 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>
  );
}

我在钩子中注册监听器，当组件卸载时我移除监听器