单击按钮时使用 CSS 模块更改 Next.js 中的类名的最佳方法？答案

【问题标题】：Best way to change className in Next.js when a button is clicked, with CSS Modules?单击按钮时使用 CSS 模块更改 Next.js 中的类名的最佳方法？
【发布时间】：2022-07-27 04:00:25
【问题描述】：

我正在创建一个基本的导航栏，我想根据屏幕大小对其进行更改。一旦达到 600 像素，我想隐藏链接并显示一个可点击的导航按钮，该按钮将展开这些选项。

在控制台记录我的列表元素后，我发现 className 被赋予了“Nav_floatLeft__H1YZ8”。因此，基于该发现，我的代码如下。但是，单击按钮时，我的导航没有显示任何变化。

我确信 React 有更好的方法来处理这种情况，但我对它还很陌生。我应该使用某种状态/效果挂钩吗？

导航：

const openCloseMenu = () => {
    console.log(document.getElementsByClassName(styles.floatLeft).className);
    let elements = document.getElementsByClassName(styles.floatLeft);

    if (elements.className === "Nav_floatLeft__H1YZ8"){
        alert("Changed to: Menu Bar Expanded");
        elements.className = styles.menuBarExpanded;
    }
    else {
        alert("Changed Back to: Float Left")
        elements.className = styles.floatLeft;
    }
}

return (
    <div className={styles.topNav}>
        
        <nav>
            <ul className={styles.inlineListItem}>
            
                <li className={styles.floatLeft}>
                    <Link href="/">
                        <a>Home</a>
                    </Link>
                </li>

                <li className={styles.floatLeft}>
                    <Link href="/search">
                        <a>Search</a>
                    </Link>
                </li>

                <li className={styles.menuBar}>
                    <button onClick={openCloseMenu}>Expand Nav</button>
                </li>

            </ul>
            
        </nav>
    </div>
)

CSS：

.inlineListItem{
    display: inline;
    list-style: none;
}

.floatLeft{
    float: left;
    margin: 1rem;
    padding-left: 1rem;
    text-align: center;
    color: white;
}

.floatRight{
    display: inline;
    float: right;
    color: white;
    margin: 1rem;
    padding-right: 2rem;
}

.menuBar{
    display: none;
    float: left;
    margin: 1rem;
    padding-left: 1rem;
    text-align: center;
    color: white;
}

.menuBarExpanded{
    display: block;
}

@media screen and (max-width: 600px) {
    .menuBar{
        display: block;
    }
    .floatLeft{
        display: none;
    }
    .floatRight{
        display: none;
    }
}

【问题讨论】：

标签： javascript reactjs next.js css-modules classname

【解决方案1】：

有办法解决这个问题。您可以使用材质 UI。检测断点。就像你的情况一样。如果要检测 600px。你可以做这样的事情---

const themeBreakpoint = theme.breakpoint.down('600px) // themeBreakpoint 在 600px 下为真。

使用此标志，您可以更改状态并使用条件渲染显示您想要的任何内容。

第二个问题—— 您可以根据 onClick 事件更改任何状态。

喜欢—— const[clicked,setclicked] = useState(false)

const handleClick = (e) =>{ 设置点击（真） } 现在，当您将单击的标志设置为 true 时，您会根据该标志更改您的 css 类。

【讨论】：

【解决方案2】：

你可以实现一个 useState 钩子：

import { useState } from "react";

const YourComponent = () => {

const [cliked, setClicked] = useState(false);

return (
    <YourNavbar className={clicked ? "display" : "hide"} />
    ....
    <button onClick={() => setClicked(current => !current)}>Expand Nav</button>
    ....
    )
}

而在css上，可以用navbar的实际属性建立class display，以及一个hidden (display: none)

这将检查导航栏按钮是否被点击（设置为true），在条件类上，如果为true，则通过“显示”类显示导航栏，如果再次点击按钮，点击将为 false 并且导航栏的类将被“隐藏”。

请记住，仅当导航栏低于 600 像素时，才使用 @media 将此类名称委派给项目

【讨论】：