javascript - 如何使用 React.js 和 setActive 激活单个 div?
问题描述
我目前正在创建一个具有三个菜单选项卡的应用程序,每个选项卡都由带有菜单标题和内容的手风琴表示。目前,当单击标题时,内容 div 会相对于框中的任何内容显示。我想单击每个菜单标题并让该菜单的内容 div 单独出现,从而触发该特定 div 的活动状态。
我创建的切换手风琴功能会打开所有内容窗口。单击任何菜单标题时,将显示所有内容。
这是我的功能,简化:
function PlayerApp(props) {
const [setActive, setActiveState] = useState("");
const [setHeight, setHeightState] = useState("0px");
const content = useRef(null);
function toggleAccordion() {
setActiveState(setActive === "" ? "active" : "");
setHeightState(
setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
);
}
return (
<div className="content">
<div className="content-list">
<div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
<div className="accordion__text"> text content here </div>
</div>
</div>
<div className="content-list">
<div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
<div className="accordion__text"> text here </div>
</div>
</div>
<div className="content-list">
<div ref={content} style={{ maxHeight: `${setHeight}` }} className="accordion__content">
<div className="accordion__text"> text content her </div>
</div>
</div>
<div className="content-title">
<button className={`menu_title1 ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">Menu 1:</p>
</button>
</div>
<div className="content-title">
<button className={`menu_title2 ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">Menu 2:</p>
</button>
</div>
<div className="content-title">
<button className={`menu_title3 ${setActive}`} onClick={toggleAccordion}>
<p className="accordion__title">Menu 3:</p>
</button>
</div>
</div>
);
}
export default PlayerApp;
尽管我的每个按钮类都有唯一的名称,但单击该类仍会触发所有这些 div 的活动状态。
如何更改我的功能,以便单击每个按钮为该手风琴窗口呈现独特的响应?
解决方案
You can actually cleanup your code by creating an array with menu details.
const accordionItems = [
{ id: 'menu1', text: 'Menu 1' },
{ id: 'menu2', text: 'Menu 2' },
{ id: 'menu3', text: 'Menu 3' },
];
const [activeItem, setActiveItem] = useState();
and the html will be like
{accordionItems.map((p, index) => {
return (
<div className="content-title">
<button
className={`menu_title1 ` + (activeItem === p.id ? 'active' : '')}
onClick={() => {
setActiveItem(p.id);
}}
>
<p className="accordion__title">{p.text}</p>
</button>
</div>
);
})}
推荐阅读
- sql - 选择特定列中重复值最多的行
- tensorflow - 说卷积实现是基于 GEMM(矩阵乘法)还是基于 1x1 内核是什么意思?
- laravel - 在 Laravel 8 项目上安装 hyn/多租户时出错
- ubuntu - Kubernetes:如何设置作业 / pod 的最短生命周期?
- minecraft - Minecraft Education 不会始终如一地运行代码
- c# - c#如何为序列化指定自定义接口
- html - “C++”而不是“C++”会阻碍搜索引擎索引吗?
- scala - 如何避免while循环并在scala中返回
- haskell - Haskell - 涉及 2 个字符串列表的 foldr
- python - 当我声明大小限制时,为什么我的 tkinter 顶层很大?