我有一個簡單的函式來處理多個按鈕的狀態并創建一個動態類。在我的代碼中，我已成功更改了 onclick 事件的狀態。我想為 onclick 事件動態更改類顏色，但類沒有改變。我在這里做錯了什么？我一直在為簡單的事情而掙扎
import React, { useEffect, useState } from 'react'
function Tes() {
const lst = [
{
'name' : 'Python',
'active': true,
'disabled': false
},
{
'name' : 'Java',
'active': false,
'disabled': true
},
{
'name' : 'PHP',
'active': true,
'disabled': false
},
{
'name' : 'C ',
'active': true,
'disabled': false
},
{
'name' : 'Javascript',
'active': false,
'disabled': true
},
{
'name' : 'Django',
'active': true,
'disabled': false
}
]
const [statebtn, setStatebtn] = useState(lst)
function onClick(key, index) {
let tmp = statebtn;
tmp[index][key] = !tmp[index][key];
setStatebtn(tmp);
console.log(statebtn, 'fsadsada');
}
function changeClass(statevalue) {
return (statevalue ? "btn-primary" : "btn-danger")
}
return (
<div>
{lst.map((x,index) => (
<button onClick={() => onClick('active', index)} className={`btn ${statebtn[index]['active'] ? "btn-primary" : "btn-danger"}`} disabled={x['disabled']}>{x['name']}</button>
))
}
</div>
)
}
export default Tes
uj5u.com熱心網友回復：
2 注意到我的朋友。
function onClick(key, index) {
let tmp = [...statebtn]; // <- this will force the ref to original data to be changed, so mutations will trigger re-rendering.
tmp[index][key] = !tmp[index][key];
setStatebtn(tmp);
}
還！我注意到您不是在狀態上回圈，而是在硬編碼陣列上回圈。改用這個。
{statebtn.map((x, index) => ( // <- statebtn.map instead of lst.map
<button
onClick={() => onClick("active", index)}
className={`btn ${x["active"] ? "btn-primary" : "btn-danger"}`}
disabled={x["disabled"]}
>
{x["name"]} {x["active"].toString()}
</button>
))}
uj5u.com熱心網友回復：
它不作業的原因是因為你在做一個淺拷貝，你應該做的是做一個深拷貝。
檢查下面的代碼
function onClick(key, index) {
let tmp = statebtn.slice();
tmp[index][key] = !tmp[index][key];
setStatebtn(tmp);
console.log(statebtn, 'fsadsada');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393470.html
標籤：javascript 反应