我目前正在使用 React 中的 .map 方法渲染三個按鈕。按鈕是從一個 useState 的陣列中拉出來的。
單擊時，按鈕會添加一個 .active 類。
首次加載頁面時，如何將第一個元素設定為具有 .active 類？
當前代碼： https : //codesandbox.io/s/recursing-lake-oetxj?file=/ src/ App.js
嘗試將第一個 activeObject 設定為 set 變數，但沒有奏效。我也嘗試使用另一個 useState 但無法弄清楚如何將兩者聯系起來。還嘗試使用 useEffect 在第一次渲染時加載初始狀態，但也無法弄清楚如何鏈接。
uj5u.com熱心網友回復：
在我看來，您應該使用物件的 id 來識別它們是否處于活動狀態，這將使您的生活更輕松：
當您嘗試定義您的類時，您正在比較活動物件和元素的參考，因此很難擁有默認的活動類，使用 ids（數字），您可以更輕松地比較值。
這是使用 ids 的重構：https : //codesandbox.io/s/elegant-buck-z7ter? file =/ src/ App.js
uj5u.com熱心網友回復：
做這樣的事情怎么樣：
function toggleActiveStyles(index, id) {
if (buttons.activeObject) {
return id === buttons.activeObject.id ? "active" : "inactive";
} else {
return index === 0 ? "active" : "inactive";
}
}
并在HTML。：
{ buttons.objects.map((elements, index) => (
<button
key={index}
className={toggleActiveStyles(index, elements.id)}
onClick={() => toggleActive(index)}
>
{elements.name}
</button>o
現場演示 :
演示
uj5u.com熱心網友回復：
你可以用 useEffect() 來做到
useEffect(() => {
toggleActive(0);
}, []);
https://codesandbox.io/s/vigilant-hopper-4we6k?file=/src/App.js
uj5u.com熱心網友回復：
我認為 useEffect 是這里的方法，您已經有了將類設定為活動的方法，您只需要在 useEffect 鉤子內呼叫它，以便在組件第一次使用您想要的引數渲染時呼叫它。像這樣的東西：
useEffect(()=>{
//here we set the default class
toggleActive(0, buttons.objects[0].name)
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/397368.html
標籤：javascript css 反应 按钮 使用状态
下一篇：CSS交換影像并制作閃爍效果