<div>
{arrayOfDetails.map((deets, index) => (
<div>
<h1>{deets.firstName ' ' deets.lastName}</h1>
<div>
<div id={index}>
{listOfGrades(deets.grades)}
</div>
</div>
<button type="button" data-toggle="button" aria-pressed="false" autoComplete="off"> </button>
</div>
))}
</div>
我正在通過 JSON 中的陣列進行映射，并且按鈕也在獲取地圖。如何獲得按鈕來切換包含 listOfGrades 的 div 的顯示與 ID？所以 20 個 listOfGrades div 的 20 個按鈕，每個按鈕都應該切換自己對應的 div。謝謝！
使用 ReactJS
uj5u.com熱心網友回復：
您可以在資料中添加一個跟蹤hidden狀態的屬性。然后在按鈕上單擊一行，找到該行的索引和切換hidden屬性。
const [deets, setDeets] = useState([]); // Set initial Value here with hidden property for each item in array
const toggleElement = (idx) => {
let newDeets = [...deets];
deets[idx].hidden = !deets[idx].hidden;
setDeets(newDeets);
};
return (
<div>
{arrayOfDetails.map((deets, index) => (
<div>
<h1>{deets.hidden ? "" : `${deets.firstName} ${deets.lastName}`}</h1>
<div>
{deets.hidden ? (
""
) : (
<div id={index}>{listOfGrades(deets.grades)}</div>
)}
</div>
<button
type="button"
data-toggle="button"
aria-pressed="false"
autoComplete="off"
onClick={() => toggleElement(index)}
>
</button>
</div>
))}
</div>
);
uj5u.com熱心網友回復：
isActive為每個資料物件添加一個屬性。
例如 ：
setArrayOfDetails(dataComingFromServer.map(item=>({...item,isActive:true})))
創建用于切換活動狀態的回呼：
const toggleActive=(index)=>{
const newState=[...arrayOfDetails]
newState[i].isActive=!newState[i].isActive
setArrayOfDetails(newState)
}
現在渲染活動的專案：
<div>
{arrayOfDetails.map((deets, index) => (
<div>
<h1>{deets.firstName ' ' deets.lastName}</h1>
<div>
{deets.isActive && <div id={index}>
{listOfGrades(deets.grades)}
</div>}
</div>
<button type="button" data-toggle="button" aria-pressed="false" autoComplete="off" onClick={()=>toggleActive(index)}> </button>
</div>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454941.html
標籤：javascript html 反应