我想單獨切換串列..應該如何進行？
.map((item) => {
return (
<>
<StyledTableRow key={item.medName}>
<button onClick={() => setToggle(!toggle)}>
<StyledTableCell component="th" scope="row">
{item.medName}
</StyledTableCell></button>
{toggle && <StyledTableCell align="center" >
{item.saltName}
</StyledTableCell>
</StyledTableRow>
</>
uj5u.com熱心網友回復：
與其為每個元素存盤一個布爾狀態值，不如存盤一個 id 或其他可以獨立設定/檢查的唯一屬性。
例子：
const [toggled, setToggled] = React.useState({});
const toggleHandler = id => {
setToggled(ids => ({
...ids,
[id]: !ids[id], // <-- toggle specific element by key
}));
};
...
.map((item) => {
return (
<>
<StyledTableRow key={item.medName}>
<button onClick={() => toggleHandler(ite.medName)}> // <-- pass property
<StyledTableCell component="th" scope="row">
{item.medName}
</StyledTableCell>
</button>
{toggle[item.medName] && ( // <-- check property
<StyledTableCell align="center">
{item.saltName}
</StyledTableCell>
)}
</StyledTableRow>
</>
);
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/443869.html