事件onclick不发生NextJS
事件onclick不发生NextJS
提问于 2021-01-27 19:45:26
index.js：
function Home () {
return <div>
<html>
<head>
<title>Site</title>
</head>
<body>
<div class= 'v5_3' onclick = "func_click()"></div>
</body>
</html>
</div>
}
function func_click() {
alert('ALERT!!');
}
export default Home ; func_click不过，当我单击div‘npm run dev’中的按钮时，单击through this link (19:00 ate 21:50)文件中的'v5_3‘按钮时，我正在使用nextjs通过through this link (19:00 ate 21:50)进行本地开发：
.v5_3 {
width: 150px;
height: 50px;
color: white;
background: rgb(5, 5, 5);
opacity: 1;
position: absolute;
top: 30px;
left: 1171px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}，这是由_app.js文件导入的：
import './main.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}它们依次都在“页面”文件夹中：
不执行我的警报，它位于函数func_click()中。
function func_click() {
alert(' ALERT!!');
}我无法与JavaScript进行这种交互，如何解决这个问题？
Stack Overflow用户
回答已采纳
发布于 2021-01-27 20:14:41
我相信您知道Next.js是一个React.js框架。这意味着您需要处理单击的方式，反应处理它们。
从定义组件内部的函数开始。这不是强制性的，但是增加了代码的内聚性。
然后，通过使用onClick click和括号语法onClick={funcClick}来将click函数绑定到div，从而引用该函数。
对于class，使用className代替。这些元素还不是HTML元素，应该被看作是对象。考虑到这一点，className是HTMLElement对象的属性。
function Home() {
const funcClick = () => {
alert("ALERT!!");
};
return (
<div>
<html>
<head>
<title>Site</title>
</head>
<body>
<div className="v5_3" onClick={funcClick}></div>
</body>
</html>
</div>
);
}
export default Home;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65926307
复制相关文章
相似问题
腾讯云开发者
