事件 onclick 不會發生 NextJS

Question

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 進行開發，這是我通過此鏈接了解到的（19:00 吃了 21:50），但是當我單擊 div 'v5_3' 內的按鈕時，它又是主要的。 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 文件夾中：

不執行我的警報，它在 function func_click()中：

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


        }

我無法與 JavaScript 進行這種交互，如何解決？

Answer 1

相信你知道 Next.js 是一個 React.js 框架。 這意味着您需要像 React 處理點擊一樣處理點擊。

首先在組件內部定義 function。 這不是強制性的，但會增加代碼的凝聚力。
然后引用 function 使用onClick和括號語法onClick={funcClick}將點擊 function 綁定到 div。

對於class使用className代替。 這些元素（尚未）不是 HTML 元素，應視為 object。 考慮到這一點， className是HTMLElement object 的屬性。

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;

事件 onclick 不會發生 NextJS

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-27 20:14:41

事件 onclick 不會發生 NextJS

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-27 20:14:41

解決方案1
0 已采納 2021-01-27 20:14:41