如何在react js中的javascript中添加click事件监听器

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并更新状态

以下解决方案在我使用危险时不起作用插入HTML

这是我的代码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>
);
}

我在挂钩中注册侦听器，当组件卸载时，我会删除侦听器