处理多个复选框并根据选择推送或筛选值

Question

如何处理复选框是否选中，如果选中则推送对象，如果未选中则移除？

这是设置为状态的初始arr

let arr=[{lable:lable1,value:value1}
{lable:lable2,value:value2}
{lable:lable3,value:value3}
]

选择复选框时触发的处理功能

function handleChange(item) {
let temp = [...arr];
if (temp.includes(item.value)) {
temp = temp.filter((value) => value != item.value);
} else {
temp.push(item.value);
}
setState(temp);
}

基于阵列的多复选框迭代

{arr.map((item, i) => {
return (

<label className="check-wrap">
<input
className="check-field"
checked={ ? } // how to handle checkbox is selected or not
name={item.lable}
onChange={() => handleChange(item)}
type="checkbox"
/>
<span className="check-label">{item.value}</span>
</label>
</div>
))}

codesandbox 中的问题

Answer 1

您应该使用prevState，而不是直接引用状态值。

// ... rest of the onChange function
this.setState(prevState => ({
arr: prevState.arr.includes(temp)
? prevState.arr.filter(value => value !== item.value)
: [...prevState.arr, temp]
}))

你可以在这里阅读reactjs中的setState操作

钩子的工作原理相同：

const [arr, setArr] = useState([])
// ...later
setArr(prevArr => prevArr.includes(temp)
? prevArr.fitler(value => value !== item.value)
: [...prevArr, temp]
)