如何保存或分配信息给按钮？ Ant 设计 React Js

Question

我需要能够使用一组复选框在每个按钮中分配或保存每个字典（如果它处于活动状态，则为真/假）

我的看法是这样的：

在此处输入图像描述

我需要每个按钮将选定的复选框保存在它旁边，以便我可以将它们以表单形式提交给该信息。

我的代码是这样的：

 <Form.Item>
   Object.entries(data?.permissions_grid)
   .map(([key, value]) => (
      <Button
        onClick={() => { props.buttonSelection(value.permissions_template)} }>
        {value.name} 
      </Button>
    ))
 </Form.Item>

 <Form.Item>
   !_.isEmpty(dataPermissions) &&
     Object.entries(dataPermissions)
       .map(([key, value]) => (
           <Row className="check-permissions">
              <Checkbox
                onChange={onChange}>
                {key}
              </Checkbox>
            </Row>
        ))
 </Form.Item>

这些信息是从后面传给我的，它们是我正在经历的两个对象。 后面等待下一个响应：

"name": "Consultor 3",
   "description": "",
   "edit_permissions_grid": {
       "1": {
           "name": "Audios Textos",
           "description": "Listado de audios con filtros",
           "url": "/audios",
           "selected_permissions": {
               "add": true,
               "delete": false,
               "edit": false,
               "query": true,
               "download": false,
               "play": false
           }
       },
       "2": {
           "name": "Reportes",
           "description": "reportes",
           "url": "/reportes",
           "selected_permissions": {
               "add": false,
               "delete": false,
               "edit": false,
               "query": false,
               "download": true,
               "play": false
           }
       }
   }

Answer 1

让我们在<Checkbox.Group />中渲染这些复选框，并使用值string[]来控制选中的项目。

antd 复选框： https://ant.design/components/checkbox/