将 jquery 转换为反应 - 无需切换的 addclass 和 removeclass 函数答案

【问题标题】：Converting jquery to react - addclass and removeclass functions without toggling将 jquery 转换为反应 - 无需切换的 addclass 和 removeclass 函数
【发布时间】：2021-12-22 17:04:23
【问题描述】：

我正在尝试为画廊列表创建 2 个网格调整大小按钮。一个用于较小的网格 (.museum-grid)，另一个用于较大的网格 (.large-grid)。

当我点击 #museum-grid-btn 时，我想要执行以下操作：

将 .museum-grid 类添加到 #gallery-list
从#gallery-list 中删除class .large-grid
将 .grid-active 类添加到 #museum-grid-btn
从 #museum-grid-btn 中删除类 .grid-active

当我点击 #large-grid-btn 时，我想做相反的事情：

将类 .large-grid 添加到#gallery-list
从 #gallery-list 中删除类 .museum-grid
添加类 .grid-active 到 #large-grid-btn
从 #museum-grid-btn 中删除类 .grid-active

我正在这样做，而不是出于界面目的使用切换 bc 我觉得允许切换网格大小按钮选择会很奇怪。我想单击一个网格大小，然后如果我再次单击它，相同的状态将保持不变。只有当我单击另一个选项时，我才希望更改网格大小。这反映在 jquery 中。我很难弄清楚如何将其翻译为做出反应，因为它不像切换那么简单；虽然也许我忽略了一种更简单的方法。

这是我为此准备的 jquery

$(document).ready(function(){
       
    $('#museum-grid-btn').on('click', function(e) {
        $('#gallery-list').addclassName("museum-grid");
        $('#gallery-list').removeclassName("large-grid");
        $('#museum-grid-btn').addclassName("grid-active");
        $('#large-grid-btn').removeclassName("grid-active");
        e.preventDefault();
        });
    $('#large-grid-btn').on('click', function(e) {
        $('#gallery-list').addclassName("large-grid");
        $('#gallery-list').removeclassName("museum-grid");
        $('#large-grid-btn').addclassName("grid-active");
        $('#museum-grid-btn').removeclassName("grid-active");
        e.preventDefault();
        });
      
});

还有html

<body>
    <section id="main"> 
        <div id="the-gallery">
            <div id="search">
                <input type="search" id="gallery-search" name="q" placeholder="#">
                <div id="filter-btn" class="control-btn">
                    <button id="filter-icon"><img src="img/gallery-filter.svg"/></button>
                </div>
                <div id="large-grid-btn" class="control-btn">
                    <button id="large-grid-icon"><i class="fas fa-th-large"></i></i></button>
                </div>
                <div id="museum-grid-btn" class="control-btn grid-active">
                    <button id="museum-grid-icon"><i class="fas fa-th"></i></button>
                </div>
            </div> 
            <ul id="gallery-list" class="museum-grid">
                <li class="gallery-item">
                    <img src="img/00001.jpg">
                    <div class="listing-title-row">
                        <h2>#00001</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00002.jpg">
                    <div class="listing-title-row">
                        <h2>#00002</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00003.jpg">
                    <div class="listing-title-row">
                        <h2>#00003</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00004.jpg">
                    <div class="listing-title-row">
                        <h2>#00004</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00005.jpg">
                    <div class="listing-title-row">
                        <h2>#00005</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00006.jpg">
                    <div class="listing-title-row">
                        <h2>#00006</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00007.jpg">
                    <div class="listing-title-row">
                        <h2>#00007</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00008.jpg">
                    <div class="listing-title-row">
                        <h2>#00008</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00009.jpg">
                    <div class="listing-title-row">
                        <h2>#00009</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
                <li class="gallery-item">
                    <img src="img/00010.jpg">
                    <div class="listing-title-row">
                        <h2>#00010</h2>
                        <div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
                    </div>
                </li>
            </ul>
        </div>     
    </section>
</body>

.grid-active 更改所选按钮的样式以表明它已被选中。
.museum-grid 和 .large-grid 更改网格列表项的大小

在反应模板中激活此功能的适当方法是什么？我熟悉使用 usestate 并在 onClick 上制作切换功能，但是如果我想执行上述操作怎么办？我很感激和指导。

补充资料：

我太陌生了，我不能 100% 确定这是一个函数式组件还是类组件。我只是想让它工作。我已经做了一些工作来使用切换来扩展和关闭过滤器菜单。这是我的 tsx 文件中的代码。也许你可以告诉我我使用的是哪个 - 函数式组件还是类组件？

import React, { useState } from "react";
 
function VisionExplorer() {
  
  // Creating a state for the filter pane.
  const [filterToggled, setFilterToggled] = useState(false);
  const ToggleFilter = ()=>{
    filterToggled ? setFilterToggled(false) : setFilterToggled(true);
  }

<main id="main" className={filterToggled ? "filter-open" : ""}>

<div id="filter-btn" className="control-btn" onClick={ToggleFilter}>
   <button id="filter-icon">
      <img src="/assets/images/gallery-filter.svg" />
   </button>
</div>

这段代码将 filter-open 类切换到我使用 css 打开和关闭过滤器窗格的主 div。我使用过滤器按钮上的切换。这是函数还是类组件？

【问题讨论】：

这个是函数组件还是类组件？
我添加了一些有助于回答这个问题的信息。我还在学习，所以我需要让工作为我回答一些问题:)
函数组件是一个函数，其开头类似于function ComponentName() { 或const ComponentName = () => {，而类组件是一个类，开头类似于class ComponentName extends Component。它们在 React 生态系统中的工作方式之间存在一些差异，但您可以使用两者获得相同的结果。您正在使用函数组件。
啊，好吧，我将不得不查找更多关于类组件的信息。我很感激！

标签： javascript jquery reactjs next.js use-state

【解决方案1】：

你可以在 React 中使用 state 来帮助解决这个问题。

不知道你用的是函数组件还是类组件。

这里是一个使用函数组件的例子：

const ComponentA = () => {
    // Set up a state variable to control the mode (Normal / Large) of the component.
    // mode will be the value stored for the current render.
    // setMode is a function that lets you update mode.
    // https://reactjs.org/docs/hooks-state.html
    const [mode, setMode] = useState('Normal');

    // On large button click handler.
    const onLargeClick = () => {
        // When setMode is called the component will rerender with the new value.
        setMode('Large');
    };

    // On normal button click handler
    const onNormalClick = () => {
        // When setMode is called the component will rerender with the new value.
        setMode('Normal');
    };

    return (
        <>
            { /* Swap size related class name based on mode value */ }
            <div 
                className={mode === 'Large' ? 'classLarge' : 'classNormal'}
            >
                Text
            </div>
            { /* Swap active class name for normal button based on mode value */ }
            <div 
                onClick={onNormalClick}
                className={mode === 'Normal' ? 'classActive' : undefined}
            >
                Normal
            </div>
            { /* Swap active class name for large button based on mode value */ }
            <div 
                onClick={onLargeClick}
                className={mode === 'Large' ? 'classActive' : undefined}
            >
                Large
            </div>
        </>
    )
};

注意：您可以查看 clsx 之类的包，而不是对类名使用三元语句。

【讨论】：

我会调查一下 clsx。这是我与 React 合作的第三天。这实际上将在 next.js 应用程序中