为客户端逻辑运行 js 客户端

Question

我正在使用 Next.js 构建一个应用程序，但我的标题组件遇到了问题。我有一个菜单可以折叠成移动设备上的汉堡菜单。当菜单出现时，我需要显示和隐藏整个页面的模糊。所以我试图用 js 逻辑来做到这一点。我面临的问题是逻辑在服务器上执行，但我无法添加客户端逻辑，所以点击按钮永远不会起作用。代码如下：import React, { useState } from 'react'export default () => {    const [showMenu, setShowMenu] = useState(false)    function toggleMenu () {        setShowMenu(!showMenu)    }    return (      <>        <nav id="header">          <button onClick={toggleMenu}>X</button>        </nav>        { showMenu ?             <div style={{background: 'rgba(0,0,0,.5)'}}></div>        : null        }      </>  )}

Answer 1

如果有人遇到同样的问题，问题出在 _document.js 文件上。它引入了 onclick 处理程序的一些问题。所以如果真的需要修改 _document.js 文件，你应该意识到这一点。