Onclick 按鈕在 ReactJs 中不起作用

Question

我正在使用 Reactjs (Nextjs)，我將“css，images，js”文件放在“public”文件夾中，但我的菜單欄沒有顯示（onclick 不起作用），我怎樣才能使它工作，所以點擊后將顯示此按鈕菜單，這是我的代碼

<button className="openbtn" onclick="openNav()">
        <img src="images/menu_btn.png" />
</button>

Answer 1

您正在向 onClick function 發送一個字符串，因此將您的 onClick 按鈕更改為此，

onClick={ openNav }

Answer 2

正如其他人所提到的，您需要您的onClick屬性來調用處理程序 function，即。

const openNav = () => {
   console.log("openNav has been clicked");
}

<button className="openbtn" onClick={openNav}>
        <img src="images/menu_btn.png" />
</button>

Answer 3

您應該以這種方式調用您的openNav function （否則您只是發送一個字符串）並使用onClick （而不是onclick ）：

<button className="openbtn" onClick={openNav}>
    <img src="images/menu_btn.png" />
</button>

Answer 4

首先，您將 openNav 作為字符串傳遞，而不是 function - 您不能調用字符串文字。

其次，您嘗試在 onclick 處理程序中立即調用 openNav function，這意味着當代碼在瀏覽器中運行時，openNav 將觸發。

您需要執行以下任一操作：

onClick={openNav}

或者如果你想傳遞一個論點

onClick={(arg) => openNav(arg)}