时间戳

首页 > 解决方案 > 如何使用单个切换按钮推送和删除具有 3 个三个属性的对象

reactjs - 如何使用单个切换按钮推送和删除具有 3 个三个属性的对象

问题描述

我将在数组中推送一些对象并根据那里的特定 ID 删除它们。现在的挑战是我想使用单个切换按钮同时进行推送和删除。

this.state = {
    array: [{
        id: 1,
        name: "Abc",
        checkBoxState: true
    }, ]
}

handleData(label, value, id) {
    let obj = JSON.stringify({
        id: id,
        name: label,
        checkBoxState: value
    });
    let array = this.state.array;

    array.push(obj);
    console.log(array);
}

请告诉我如何在一个按钮上实现它。

例如，如果我按下确定按钮，我将获取属性并推入一个数组，如果我再次按下此按钮，它将必须根据 ID 从数组中删除对象。

标签： reactjs

解决方案

根据您的评论进行编辑。首先检查该项目是否存在于数组中。如果有，请将其删除。如果它没有添加新项目。我没有时间测试，但这样的事情可能会奏效。

this.state = {
 array: [{
    id: 1,
    name: "Abc",
    checkBoxState: true
 }]
}

handleData(label, value, id) {
 let array = this.state.array;
 let arrayIds = Object.values
 for (let item of array) {
  if (item.id === id) {
    let deletedObj = array.filter(item => item.id === id)
   this.setState({
     array: deletedObj,
   })
  return
 } 
}

 let obj = JSON.stringify({
  id: id,
  name: label,
  checkBoxState: value
  });
  array.push(obj);
  this.setState({
   array
  })
 }
} 
console.log(this.state.array);
}

推荐阅读