接下来.js显示/隐藏按钮上的 div

Question

我正在尝试在Next JS中显示和隐藏按钮上的div。

这篇文章对我帮助很大： 下一步.js切换div 标签的显示

在我的情况下，我使用 useState 使用此解决方案，它运行良好。不同之处在于我有很多按钮，每个按钮都应该显示不同的div 并隐藏活动的div。

这就是我想要实现的目标 https://codepen.io/CthuKi/pen/YqZvRv

export default function Header(){
const [showMe, setShowMe] = useState(false);
function toggle(){
setShowMe(!showMe);
}
return (
<>
<button onClick={toggle}>Button 1</button>
<button onClick={toggle}>Button 2</button>
<button onClick={toggle}>Button 3</button>
<div>
<div style={{display: showMe?"block":"none"}}>
Show this div on button 1 and hide other active
</div>
<div style={{display: showMe?"block":"none"}}>
Show on button 2 and hide other active
</div>
<div style={{display: showMe?"block":"none" }}>
Show on button 3 and hide other active
</div>
</div>
</>
);
}

我将不胜感激任何帮助

Answer 1

一种解决方案是使用多个toggle函数来切换多个div。但是有一个更好的方法，只创建一个状态变量showAll和一个函数toggleAll来显示所有内容。

若要切换一个按钮以显示特定内容，请创建要显示的数据数组，然后只需更改索引即可显示数组中的当前数据。

例如，请参阅演示的代码沙箱

import React, { useState } from "react";
export default () => {
const [data, setData] = useState(["hello", "hi there", "holla"]);
const [showAll, setShowAll] = useState(false);
const [currentIdx, setCurrentIdx] = useState(0);
const [showCurrent, setShowCurrent] = useState(false);
const toggleAll = () => {
setShowAll(val => !val);
setShowCurrent(false);
};
const toggleCurrent = () => {
if (!showCurrent) {
setShowCurrent(true);
setShowAll(false);
return;
}
};
const setCurrent = index => {
setCurrentIdx(index);
toggleCurrent();
};
return (
<div>
<div>
<button onClick={toggleAll}>{showAll ? "Hide All" : "Show All"}</button>
<button onClick={() => setCurrent(0)}>First</button>
<button onClick={() => setCurrent(1)}>Second</button>
<button onClick={() => setCurrent(2)}>Third</button>
</div>
<div>
{showAll && data.map((el, i) => <p key={`content-${i}`}>{el}</p>)}
</div>
{showCurrent ? <div>{data[currentIdx]}</div> : null}
</div>
);
};