在不切换的情况下将jquery转换为react-addclass和removeclass函数

我正试图为库列表创建两个网格大小调整按钮。一个用于较小的网格(.museum网格(，另一个用于较大的网格(.legal网格(。

当我点击#博物馆网格btn时，我想做以下事情：

将class.museum网格添加到#图库列表
从#gallery列表中删除class.legal网格
将class.grid活动添加到#博物馆网格btn
removeclass.grid从#museum-grid激活

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

添加class.lage网格到#gallery列表
从#图库列表中删除class.museum网格
addclass.grid活动到#large grid btn
removeclass.grid从#museum-grid激活

我是这样做的，而不是出于界面目的使用切换bc。我觉得允许切换网格大小的按钮选择会很奇怪。我想点击一个网格大小，然后如果我再次点击它，相同的状态将保持不变。只有当我单击另一个选项时，我才希望更改网格大小。这反映在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网格和.olarge网格更改网格列表项目的大小

在react模板中使用此功能的适当方式是什么？我熟悉使用usestate和在Click上制作切换功能，但如果我想做上面的事情呢？我很感激并给予指导。

添加信息：

我是一个刚反应过来的人，所以我不能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>

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

您可以在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这样的包，而不是对类名使用三元语句。

相关内容

最新更新

热门标签：