所以我有一個物件陣列。我遍歷這個陣列并為每個物件創建一個按鈕。當按下按鈕時，按下按鈕的物件的值“活動”將設定為真。當按下另一個按鈕時，它的“活動”值現在為真，所有其他按鈕都變為假。
看起來像這樣
myarray.map(item =>
<Button
className={item.active? "btn-active" : "btn-disabled"}
onClick={() => setActive(item);
}}
>
{item.active? "Checking..." : "Start"}
</Button>
)
我期望的行為是當一個按鈕被按下時它會變成動作，并且所有其余的都保持非活動狀態，當按下一個新按鈕時，新按鈕現在是活動的并且所有其余的都被禁用。一次只有一個活動按鈕。
但是，我遇到的問題是，當按下新按鈕時，它會變為活動狀態，但舊按鈕不會更改類并保持活動狀態，即使它的“活動”屬性設定為 false。
知道如何解決此問題嗎？
uj5u.com熱心網友回復：
如果沒有全面了解您如何使用狀態，這里有一個作業示例。我看到的另一個問題是您在映射的 jsx 元素上缺少一個鍵。
您可能沒有在狀態下更改 myarray 。
import "./styles.css";
import React from "react";
export default function App() {
const [myarray, setMyarray] = React.useState([
{ id: 1, active: false },
{ id: 2, active: false }
]);
const setActive = (id) => {
setMyarray((prev) =>
prev.map((item) => {
if (item.id === id) {
return { ...item, active: true };
}
return { ...item, active: false };
})
);
};
return (
<div className="App">
{myarray.map((item) => (
<button
key={`button-${item.id}`}
className={item.active ? "btn-active" : "btn-disabled"}
onClick={() => setActive(item.id)}
>
{item.active ? "Checking..." : "Start"}
</button>
))}
</div>
);
}
https://codesandbox.io/s/flamboyant-shirley-i24v0z
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/476713.html
標籤：javascript css 反应 jsx
上一篇：為什么我的呼叫映射函式隱藏在計數節點串列中，但在回傳輸出中可見？
下一篇：用逗號分隔的雙向系結字串