您好我在重繪 組件時遇到問題，它不起作用，在控制臺日志中正確顯示資料。我希望在單擊 div 后將單擊的元素更改為 true 并添加到此元素更改的類名
下面是jsx
{tabObjects.map((item) => (
<div
key={item.key}
id={item.key}
className={item.isChecked ? checked : notChecked}
onClick={() => selectItem(item.key)}
>
<i className={item.icon}></i>
<p className="hide-sm">{item.pText}</p>
</div>
))}
單擊 selectItem 后，我想將類名更改為選中，其余的設定為選中為 false，因此：
const selectItem = (e) => {
tabObjects.map((item) => {
item.isChecked = false;
if (e === item.key) {
item.isChecked = true;
}
});
setTabObjects(tabObjects);
};
和樣本資料 json
const [tabObjects, setTabObjects] = useState([
{
key: "sample1",
isChecked: true,
icon: "sample1i",
pText: "Test text",
},
{
key: "sample2",
isChecked: false,
icon: "sample2i",
pText: "Test text",
},
]);
let checked = "sampleClass checked";
let notChecked = "sampleClass";
我究竟做錯了什么？單擊任何帶有控制臺日志的 div 作業正常
uj5u.com熱心網友回復：
缺少return陳述是原因。
const selectItem = (e) => {
const objects = tabObjects.map((item) => {
item.isChecked = false;
if (e === item.key) {
item.isChecked = true;
}
return item;
});
setTabObjects(objects);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454956.html
標籤：javascript html 反应 功能 反应钩子
下一篇：在Vue組件中格式化貨幣？