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)
      }

跟踪多个复选框的反应

1 个答案: