[英]How to remove active class when click another toggle button in React.js?
In React.js, I have page link menus and 3 toggle buttons in header.js
.在 React.js 中,我在header.js
中有页面链接菜单和 3 个切换按钮。
All toggles buttons have div
layer when clicked.单击时,所有切换按钮都有div
层。
What I am trying to make is...我想做的是……
active
单击切换按钮时,必须删除其他切换按钮和图层 class active
active
当点击页面链接菜单(menu1、menu2、menu3)时,所有切换按钮和图层都必须被删除 class active
What do I need to change the code?我需要更改代码吗?
This is what I tried so far now.这是我到目前为止所尝试的。
Please help.请帮忙。
DEMO: https://codesandbox.io/s/49io4演示: https://codesandbox.io/s/49io4
header.js header.js
import React, { useState, useEffect } from "react";
import { NavLink } from "react-router-dom";
export default function Header() {
const [show, setShow] = useState(false);
const [show2, setShow2] = useState(false);
const [show3, setShow3] = useState(false);
useEffect(() => {
if (show) {
document.body.classList.add("bodyRemoveScroll");
} else {
document.body.classList.remove("bodyRemoveScroll");
}
}, [show]);
const onToggleClick = () => setShow(!show);
const onToggleClick2 = () => setShow2(!show2);
const onToggleClick3 = () => setShow3(!show3);
return (
<div className="header">
{/* <NavLink to="/">Home</NavLink> */}
/<NavLink to="/menu1">menu1</NavLink>/
<NavLink to="/menu2">menu2</NavLink>/<NavLink to="/menu3">menu3</NavLink>/
<button onClick={onToggleClick} className={show ? "active" : ""}>
toggle1
</button>
<nav className={`layer1 ${show ? "active" : ""}`}>layer 1</nav>/
<button onClick={onToggleClick2} className={show2 ? "active" : ""}>
toggle2
</button>
<nav className={`layer2 ${show2 ? "active" : ""}`}>layer 2</nav>/
<button onClick={onToggleClick3} className={show3 ? "active" : ""}>
toggle3
</button>
<nav className={`layer3 ${show3 ? "active" : ""}`}>layer 3</nav>
</div>
);
}
In your example, you should unselect other values once you have clicked on some item.在您的示例中,您应该在单击某个项目后取消选择其他值。 Other (preferable) option would be to have 1 state variable, where you will store your current active button id其他(首选)选项是有 1 个 state 变量,您将在其中存储当前活动的按钮 ID
const onToggleClick = () => {
setShow(!show)
setShow2(false);
setShow3(false);
};
const onToggleClick2 = () => {
setShow(false)
setShow2(!show2);
setShow3(false);
};
const onToggleClick3 = () => {
setShow(false)
setShow2(false);
setShow3(!show3);
};
So example below looks prettier to me所以下面的例子对我来说看起来更漂亮
import React, { useState, useEffect } from "react";
import { NavLink } from "react-router-dom";
export default function Header() {
const [active, setActive] = useState('');
useEffect(() => {
if (active) {
document.body.classList.add("bodyRemoveScroll");
} else {
document.body.classList.remove("bodyRemoveScroll");
}
}, [active]);
const onSetActiveMenuItem = (item) => {
if (item !== active){
setActive(item);
}
else {
setActive(''); // handle click on currently active item
}
};
return (
<div className="header">
{/* <NavLink to="/">Home</NavLink> */}/
<NavLink to="/menu1">menu1</NavLink>/<NavLink to="/menu2">menu2</NavLink>/
<NavLink to="/menu3">menu3</NavLink>/
<button onClick={() => onSetActiveMenuItem('item1')} className={active === 'item1' ? "active" : ""}>
toggle1
</button>
<nav className={`layer1 ${active === 'item1' ? "active" : ""}`}>layer 1</nav>/
<button onClick={() => onSetActiveMenuItem('item2')} className={active === 'item2' ? "active" : ""}>
toggle2
</button>
<nav className={`layer2 ${active === 'item2' ? "active" : ""}`}>layer 2</nav>/
<button onClick={() => onSetActiveMenuItem('item3')} className={active === 'item3' ? "active" : ""}>
toggle3
</button>
<nav className={`layer3 ${active === 'item3' ? "active" : ""}`}>layer 3</nav>
</div>
);
}
I suggest only using one "show" useState, and specify a "type" useState to further clarify layer:我建议只使用一个“显示”useState,并指定一个“类型”useState 以进一步阐明层:
import React, { useState, useEffect } from "react";
import { NavLink } from "react-router-dom";
export default function Header() {
const [show, setShow] = useState(false);
const [type, setType] = useState("");
useEffect(() => {
if (show) {
document.body.classList.add("bodyRemoveScroll");
} else {
document.body.classList.remove("bodyRemoveScroll");
}
}, [show]);
const onToggleClick = (type) => {
setShow(!show);
setType(type);
};
return (
<div className="header">
{/* <NavLink to="/">Home</NavLink> */}/
<NavLink to="/menu1">menu1</NavLink>/<NavLink to="/menu2">menu2</NavLink>/
<NavLink to="/menu3">menu3</NavLink>/
<button
onClick={() => onToggleClick("layer1")}
className={show ? "active" : ""}
>
toggle1
</button>
<nav className={`layer1 ${show && type === "layer1" ? "active" : ""}`}>
layer 1
</nav>
/
<button
onClick={() => onToggleClick("layer2")}
className={show ? "active" : ""}
>
toggle2
</button>
<nav className={`layer2 ${show && type === "layer2" ? "active" : ""}`}>
layer 2
</nav>
/
<button
onClick={() => onToggleClick("layer3")}
className={show ? "active" : ""}
>
toggle3
</button>
<nav className={`layer3 ${show && type === "layer3" ? "active" : ""}`}>
layer 3
</nav>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.