英文:
How to have only one active state showing dropdown and others false in react
问题
以下是您要翻译的代码部分：
export default function Header(args) {
const [isActive, setActive] = useState(false);
const [isResourceActive, setResourceActive] = useState(false);
const handleToggle = () => { setActive(!isActive); };
const resourcesHandleToggle = () => { setResourceActive(!isResourceActive); };
return (
<NavItem onClick={handleToggle} className={isActive ? "active" : ""}></NavItem>
<NavItem onClick={resourcesHandleToggle} className={isResourceActive ? "active" : ""}></NavItem>
<div className={isActive ? "active" : ""}>DROPDOWN_1</div>
<div className={isResourceActive ? "active" : ""}>DROPDOWN_2</div>
)
}
希望这对您有所帮助。
英文:
I'm trying to make a dropdown navigation. The idea is to only have one active dropdown when the navigation is clicked and the others close. At the moment it works by the following concept I have but I'm stuck currently where both dropdown is open at the same time when both are clicked.
How can I toggle/add only have one active state and turn the other's separate function state to false ? please help..
export default function Header(args) {
const [isActive, setActive] = useState(false);
const [isResourceActive, setResourceActive] = useState(false);
const handleToggle = () => {setActive(!isActive);};
const resourcesHandleToggle = () => {setResourceActive(!isResourceActive);};
return (
<NavItem onClick={handleToggle} className={isActive ? "active" : ""}></NavItem>
<NavItem onClick={resourcesHandleToggle} className={isResourceActive ? "active" :""}</NavItem>
<div className={isActive ? "active": ""}>DROPDOWN_1</div>
<div className={isResourceActive ?"active": ""}>DROPDOWN_2</div>
)
答案1
得分: 0
const [active, setActive] = useState(undefined);
const toggle = (name) => {
if (active === name) {
setActive(undefined)
} else {
setActive(name)
}
}
<NavItem onClick={() => toggle('DROPDOWN_1')} className={active === 'DROPDOWN_1' ? "active" : ""}></NavItem>
<NavItem onClick={() => toggle('DROPDOWN_2')} className={active === 'DROPDOWN_2' ? "active" : ""}></NavItem>
<div className={active === 'DROPDOWN_1' ? "active" : ""}>DROPDOWN_1</div>
<div className={active === 'DROPDOWN_2' ? "active" : ""}>DROPDOWN_2</div>
英文:
const [active, setActive] = useState(undefined);
const toggle = (name) => {
if (active === name) {
setActive(undefined)
} else {
setActive(name)
}
}
<NavItem onClick={() => toggle('DROPDOWN_1')} className={active === 'DROPDOWN_1' ? "active" : ""}></NavItem>
<NavItem onClick={() => toggle('DROPDOWN_2')} className={active === 'DROPDOWN_2' ? "active" :""}</NavItem>
<div className={active === 'DROPDOWN_1' ? "active": ""}>DROPDOWN_1</div>
<div className={active === 'DROPDOWN_2' ? "active": ""}>DROPDOWN_2</div>
答案2
得分: -1
只强制其他放置物的假（或者如果您想要的话，首先用 "if" 进行检查）
const handleToggle = () => {
setActive(!isActive);
setResourceActive(false);
};
const resourcesHandleToggle = () => {
setResourceActive(!isResourceActive);
setActive(false);
};
英文:
just force the false for the other dropp (or check it first with a "if" if u want)
const handleToggle = () => {
setActive(!isActive);
setResourceActive(false);
};
const resourcesHandleToggle = () => {
setResourceActive(!isResourceActive);
setActive(false);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论