如何在React中切换映射数组中的特定div

Question

我有一个项目，我正在映射一个array，在映射的div中有一个类似的按钮。

这个按钮应该只适用于特定的父div——在它切换所有内容的时候。

在我的代码中，我试着用一个开关做很长一段时间(它不起作用，也不好(。我试着用各种方法查找这个。

我想我需要使用e.target，但我不确定如何将e.target.value转换为一种状态。例如，如果我按下值为5的按钮(在div 5中(，我希望showDiv状态接受值(showDiv{5}(并设置为true。

我在这里错过了什么？

import { useState} from "react";
import { BulletinBoard } from "./BulletinBoard";
import PostLiked from "./PostLiked";
const ReactPost = () => {
const [showDiv, setShowDiv] = useState(false);
const [showDiv2, setShowDiv2] = useState(false);
const [showDiv3, setShowDiv3] = useState(false);
const [showDiv4, setShowDiv4] = useState(false);
const [showDiv5, setShowDiv5] = useState(false);
const [likeButton, setLikeButton] = useState(true);

const pickAndShow= (e) => {
e.preventDefault();
const chosenItem = e.currentTarget.value; 
switch(parseInt(chosenItem)){
case 1: 
console.log("Ett")
setShowDiv1(true);
setLikeButton(false);
case 2:
console.log("Två")
setShowDiv2(true);
setLikeButton(false);
break;
case 3:
console.log("Tre")
setShowDiv3(true);
setLikeButton(false);
break;
case 4: 
console.log("Fyra")
setShowDiv4(true);
setLikeButton(false);
break;
case 5:
console.log("Fem")
setShowDiv5(true);
setLikeButton(false);
break;
default:
console.log("Error")
}
}
}
return ( 
<div className="grid">
{BulletinBoard.map((item) => (
<div className="grid-item"
key={item.id}>
<span className="row">
<p>Fråga #{item.id}</p>
<h2>{item.question}</h2>
</span>
<h3>{item.answer}</h3>
<div 
className={`wrapper__${item.id}`}
>
{!showDiv ? (
<button
className="likebutton"
value={item.id}
onClick={pickAndShow}
> </button> 

<div data-key={0 + item.id}>
{showDiv1 ? 
<PostLiked/>
enter code here
:null }
</div>  
</div>
</div>  
))}
</div> 
);
}

export default ReactPost;

编辑：以下是目前正在发生的事情：在此处输入图像描述单击复选框后，映射的divs中的每个div都会发生更改：在此处输入图像描述

Answer 1

您可以拥有一个具有数字值的shownDiv属性，而不是拥有5个showDiv状态属性。

setShownDiv(parseInt(evt.currentTarget.value));