我目前正在嘗試從復選框、id 中獲取值，以便我可以執行一些邏輯并將它們存盤在 db 中。我想要做的是類似于周歷的事情，如果你點擊一個，這意味著你選擇了那一天，例如id: 1 = Sun，但是如果我再次點擊它，我不希望它復制 id，我寧愿它不被選中的意思，洗掉它。這就是我所做的，我什至嘗試使用集合但它不起作用（集合添加和洗掉內容，但問題很明顯(prev) => [...]）這就是我認為這是我做錯的，所以我想我只是需要一些關于如何做的建議。
const [dayId, setDayId] = useState([]);
{days.map((day, idx) => (
<input onChange={(e) => {
let checked = e.target.value;
const values = new Set();
setDays(
days.map(data => {
if (data.id === day.id) {
let value = e.target.value;
data.id = value;
if(data.select === false) {
data.select = true;
}
else {
data.select = false;
}
}
return data;
})
);
if(values.has(checked)) {
values.delete(checked);
}
if(e.target.checked === true) {
values.add(checked);
}
if(e.target.value === false) {
values.delete(checked);
}
setDayId(prev => {
return [...prev, ...values]
})
console.log("CHECKING CHECKED VALUE", e.target.checked);
console.log("WHAT IS THE SET VALUE", values)
}} key={idx} name={day?.name} type="checkbox" value={day?.id} checked={day.select} />
))}
總而言之，我希望該陣列添加洗掉值，具體取決于它們是否被選中然后未選中，set實際上是這樣做的，但是這些值沒有保留，所以這就是我這樣做的原因setDayId(prev => {return [...prev, ...values]})，但是就在那里保留值并且永遠不會洗掉它們，甚至復制它們。任何幫助將不勝感激。
uj5u.com熱心網友回復：
如果我理解你的問題，你基本上想要添加 id if checkedis true，并checked從dayIdstate 中洗掉 id if is false 。在setDayId檢查checked值，并且如果真然后淺復制dayId狀態并追加新的id（ value），否則從所述移除dayId陣列使用.filter的功能。
{days.map((day, idx) => (
<input
onChange={(e) => {
const { checked, value } = e.target;
setDays(
days => days.map(data => {
if (data.id === day.id) {
return {
...data,
id: value,
select: !data.select,
};
}
return data;
})
);
setDayId(prev => {
return checked
? [...prev, value] // add if checked
: prev.filter(val => val !== value) // remove if not checked
});
console.log("CHECKING CHECKED VALUE", e.target.checked);
console.log("WHAT IS THE SET VALUE", values)
}}
key={idx}
name={day?.name}
type="checkbox"
value={day?.id}
checked={day.select}
/>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399031.html
標籤：javascript 反应