为客户端逻辑运行 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 文件，你应该意识到这一点。