事件 onclick 不会发生 NextJS答案

【问题标题】：Event onclick doesn't happen NextJS事件 onclick 不会发生 NextJS
【发布时间】：2021-05-01 17:02:54
【问题描述】：

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

我通过 npm run dev 学习了 through this link (19:00 ate 21:50) 在本地使用 nextjs 进行开发，但是当我单击 div 'v5_3' 内的按钮时，该按钮又位于 main.css 文件中：

.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} />
  }

这些又都在 pages 文件夹中：

不执行我的警报，它正在运行 func_click():

function func_click() {
  alert(' ALERT!!');


        }

我无法用 JavaScript 进行这种交互，如何解决这个问题？

【问题讨论】：

标签： javascript html css next.js

【解决方案1】：

相信你知道 Next.js 是一个 React.js 框架。这意味着您需要以 React 处理点击的方式来处理点击。

首先在组件内部定义函数。这不是强制性的，但会增加代码的凝聚力。
然后引用该函数，使用onClick驼峰式和括号语法onClick={funcClick}将点击函数绑定到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;

【讨论】：