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

Question

如何处理checkbox是否被选中，选中则推送对象，未选中则移除？

这是设置为状态的初始 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]
}))

您可以在此处阅读 setState operations in reactjs

Hooks 的工作原理相同：

const [arr, setArr] = useState([])

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

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

handling multiple checkboxs and push or filter values based on selection

arrays

checkbox

reactjs