跟踪多个复选框反应

Question

我有几个从API调用动态生成的复选框，我需要将所有选中的复选框提交回API，这些复选框是分组的，我需要为每个组选择复选框，有没有一种方法可以使用状态跟踪这一点？

​

​

在这个场景中，我需要提交

add-on : add-on-1, add-on-2
addd-on : add-on-1

API结果

{
 "addons": [
  {
   "addonMandatory": false,
   "addons": [
    {
     "name": "add-on-1",
     "price": "10"
    },
    {
     "name": "add-on-2",
     "price": "10"
    },
    {
     "name": "add-on-3",
     "price": "10"
    },
    {
     "name": "add-on-4",
     "price": "10"
    }
   ],
   "maximimCount": "2",
   "name": "add-on"
  },
  {
   "addonMandatory": false,
   "addons": [
    {
     "name": "add-on-1",
     "price": "10"
    },
    {
     "name": "add-on-2",
     "price": "10"
    }
   ],
   "maximimCount": "1",
   "name": "addd-on"
  }
 ],
 "description": "",
 "image": "https://i.imgur.com/qDkhpPa.jpg",
 "name": "Product 7",
 "price": "10"
}

当前尝试

addAddonToState() {
        var addons = this.props.product.addons
        var addonsGroup = [];
        for (var i = 0; i < addons.length; i++) {
            for (var z = 0; z < addons[i].addons.length; z++) {
                var addonInit = {
                    name: addons[i].addons[z].name,
                    checked: false
                }
                addonsGroup.push(addonInit)
            }
        }
        this.setState({addons: addonsGroup})
    }

我不知道在这一步之后要做什么，因为我有多个同名的插件

Answer 1

是。您可以通过将复选框值作为参数的函数来实现它。然后您可以将值setState到状态中。一定要检查arleady值是否在里面，因为复选框的工作方式在点击时会触发onClick事件。

     addCheckboxesValue = (event) => {
        const {value} = event.target; // The value of the clicked Checkbox 
        const { checkboxesValue } = this.state // The state in our class 
        let updatedCheckboxesValue = [...checkboxesValue] 
        if ( updatedCheckboxesValue.includes(value) ) { 
          updatedCheckboxesValue = updatedCheckboxesValue.filter(checked => checked !== value) 
        } else { 
          updatedCheckboxesValue = [...checkboxesValue, value] 
        } 
        this.setState({checkboxesValue: updatedCheckboxesValue}) 
        console.log(updatedCheckboxesValue)
      }