事件onclick不发生NextJS

ohtdti5x 于 2023-05-06 发布在其他

关注(0)|答案(2)|浏览(229)

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开发nextjs，我学习了through this link (19:00 ate 21:50)，但是当我点击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进行这种交互，如何解决这个问题？

next.js

来源：https://stackoverflow.com/questions/65926307/event-onclick-doesnt-happen-nextjs

2条答案

按热度按时间

31moq8wy1#

我相信你知道Next.js是一个React.js框架。这意味着你需要以React处理点击的方式来处理它们。
首先定义组件内部的函数。这不是强制性的，但会增加代码的内聚性。
然后通过使用onClick驼峰格式和方括号语法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;

赞(0）回复(0）举报 2023-05-06

h5qlskok2#

我也遇到过同样的问题，但我成功地解决了这个问题。原因是z指数。你应该检查你的css属性。

赞(0）回复(0）举报 2023-05-06