时间戳

首页 > 解决方案 > 处理多个复选框并根据选择推送或过滤值

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

问题描述

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

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

代码沙盒中的问题

标签： arraysreactjscheckbox

解决方案

您应该使用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操作

Hooks 的工作原理相同：

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

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

推荐阅读