Div在reactjs钩子中出现并消失。
Div在reactjs钩子中出现并消失。
提问于 2022-10-12 10:51:56
我想要一个类似这个(在onclick之前)的效果，然后我点击红色div (在oncilck之后).Just，点击哪个div使它消失，然后让消失的div在再次显示之前。
这是数据代码。
const leftBarData=
[{
name:"关于音乐",
color:"bg-music-color",
icon:<div className="iconMusicSize">
</div>,
link:"/music",
number:0,
show:true,
},
{
name:"关于编程",
color:"bg-code-color",
icon:<div className="iconSize">
</div>,
link:"/code",
number:1,
show:true,
},
{
name:"关于设计",
color:"bg-design-color",
icon:<div className="iconSize">
</div>,
link:"/design",
number:2,
show:true
},
]
const leftUnBarData=[
{
name:"关于本人",
color:"bg-about-color",
icon:<div className="iconSize">
</div>,
link:"/design",
number:3,
show:true
}]
这是地图，我只想让我点击的div被未显示的数据所取代，然后它移动到未显示的数据，而不是显示，我不知道如何做到这一点。
const [statusData,setStatusData]=useState(leftBarData)
const [unShowData,setUnShowData]=useState(leftUnBarData)
const changeBar=(pars)=>
{
const temArray=statusData
temArray.splice(pars.number,1,...unStatusData);
setUnStatusData(pars)
setStatusData(temArray); //it can only work once
}
return(
<div className="flex fixed">
{statusData?.map((index,i)=>(
<Link to={index.link}>
<div className={` ${index.color} ${index.show?"":"hidden"} w-99 h-screen pt-9 `} onClick={()=>changeBar(index)}>
<div className="flex flex-col h-full items-center justify-between">
{index.icon}
<div className="-rotate-90 -translate-y-full mb-10">
<div className="h3 text-white whitespace-nowrap">{index.name}</div>
</div>
</div>
</div>
</Link>
))}
</div>谢谢你的回答！
回答 1
Stack Overflow用户
发布于 2022-10-13 08:00:35
您的函数无法第二次更新，因为函数中的部分是对象，unShowData的初始状态是数组。希望这能帮到你。
const changeBar=(pars, i)=>
{
const datas = [...statusData]
datas[i] = unShowData[0]
setUnShowData([pars])
setStatusData(datas)
}并将onClick函数更新为：
onClick={()=>changeBar(index, i)}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74040637
复制相关文章
相似问题
腾讯云开发者
