javascript - 使复选框类型的输入由 API 标记，并在交互时更改其状态

Question

你好，开发者，我希望你一切都好。我希望API检查复选框并在交互时更改它们的状态，事实是我已经尝试了几件事，但我没有找到解决方案

- 应标记的 API 带来的角色状态。

roles: [
    {
        "id": 3,
        "name": "Firmante"
    },
    {
        "id": 4,
        "name": "Trabajador"
    }
]

-所有角色也来自API

const[allRoles, setAllRoles] = [
    {
      "id": 2,
      "name": "Administrador"
    },
    {
      "id": 3,
      "name": "Firmante"
    },
    {
      "id": 4,
      "name": "Trabajador"
    },
    {
      "id": 5,
      "name": "Gestión de Usuarios"
    },
    {
      "id": 6,
      "name": "Admin Workflow"
    },
    {
      "id": 7,
      "name": "Representante Legal"
    },
    {
      "id": 8,
      "name": "Seguimiento de Notificaciones"
    }
  ]

- 到目前为止绘制的“角色”

<dt>
          <label className="mb-2">Roles</label>
            {allRoles.map(role =>{
              return (
                <div>
                  <label className="new-control new-checkbox checkbox-primary">
                    <input
                      name={role.id}
                      type="checkbox"
                      name="features"
                      class="new-control-input"
                      onChange={onChangeChecked}
                    />
                    <span class="ml-2 new-control-indicator">{role.name}</span>
                  </label>
                </div>
              )
            })}
        </dt>

-UI 图像

非常感谢您提前...

标签： javascriptreactjsrxjs

Answer 1

您需要设置checked复选框的属性

你也定义name了两次

<input
 name={role.id}
 type="checkbox"
 class="new-control-input"
 onChange={onChangeChecked}
 checked="checked"
/>