如何获得多个复选框值

Question

我正在处理一个管理小组，我有3个复选框，用于3件事情的权限。我正在获得复选框的值和权限名称。我在更新复选框值并将其发送回api时遇到了问题。

我怎么更新呢？我在网上搜索过，但没有找到任何解决办法。

这是密码。

const [permissions, setPermissions] = useState({
checklist:{
    isView:false,
    isEdit:false,
    isDelete:false },
incidences:{
    isView:false,
    isEdit:false,
    isDelete:false },
dashboardt:{
    isView:false,
    isEdit:false,
    isDelete:false
  }});
{PermissionList.map((item) => {
                    return (
                      <tr>
                        <td>
                          <div className="d-flex align-items-center">
                            <div className="ms-2">
                              <h6 className="mb-1 font-14">{item.permissionName}</h6>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div className="d-flex order-actions">
                            <input
                              className="form-check-input fs-4"
                              type="checkbox"
                              id={item.permissionId}
                              value={eval(`permissions.${item.permissionName}.isView`)}
                              checked={permissions.isView}
                              onChange={(e)=>{
                                setPermissions({
                                  isView:e.target.checked,
                                  isEdit:false,
                                  isDelete:false

                                })
                              }}
                              aria-label="..."
                            />
                          </div>
                        </td>
                        <td>
                          <div className="d-flex order-actions">
                            <input
                              className="form-check-input fs-4"
                              type="checkbox"
                              id={item.permissionId}
                              value={permissions.isEdit}
                              checked={permissions.isEdit}
                              onChange={(e)=>{
                                setPermissions({
                                  isView:false,
                                  isEdit:e.target.checked,
                                  isDelete:false

                                })
                              }}
                              aria-label="..."
                            />
                          </div>
                        </td>
                        <td>
                          <div className="d-flex order-actions">
                            <div className="d-flex order-actions">
                              <input
                                className="form-check-input fs-4"
                                type="checkbox"
                                
                              id={item.permissionId}
                              value={permissions.isDelete}
                              checked={permissions.isDelete}
                              onChange={(e)=>{
                                setPermissions({
                                  isView:false,
                                  isEdit:false,
                                  isDelete:e.target.checked

                                })
                              }}
                                aria-label="..."
                              />
                            </div>
                          </div>
                        </td>
                      </tr>
                    );
                  })}

下面是组件的快照

​

​

我希望这是发送给api的有效载荷：

{ " groupId "：1，" permissionId "：1，"isView"：false，"isEdit"：true，"isDelete"：true }当我从状态和组件Id获取groupId和permissionId时，如何获得三个更新的值的其余部分。此外，我如何动态地发送它，就像只发送其值被更新的权限id一样，而不发送其余的2或1。

Answer 1

setter有一个变体，它将把值传递给thunk函数。在onClick中使用它，扩展它以返回该对象，但只更新一个复选框值。

onClick={setPermissions((p)=>{...p, isDelete:e.target.checked})}

此外，使用eval也是非常糟糕的做法。

// Change this:
value={eval(`permissions.${item.permissionName}.isView`)}

// To this:
value={permissions[item.permissionName].isView}

编辑:只需复制传递给setter的状态，并更新要更改的值。

  onClick={
    (e) => {
      setPermissions(p => {
        const prev = { ...p }
        prev.checklist.isView = e.target.checked
        return prev
      })
    }
  }

编辑2:您可以调用一个方法onClick，它将更新组件的状态并推送到服务器。就像这样：

const onCheckboxChanged = async (whichProperty, whichCheckbox, checked) => {
    // update your component's state and cause component to re-render
    const updatedPermissions = {...permissions}
    updatedPermissions[whichProperty][whichCheckbox] = checked
    setPermissions(updatedPermissions)

    // you can just update the contents of your state property
    // directly and not change like the next line, but it will
    // not cause the component to re-render so your checkboxes
    // may not update.
    permissions[whichProperty][whichCheckbox] = checked

    // next you can notify server, spread the view/edit/delete
    // keys from your permissions object into the object you're
    // sending to the server.
    await pushToServer(JSON.stringify(
      [{
        "groupId": 1,
        "permissionId": getIdFromProperty(whichProperty),
        ...updatedPermissions[whichProperty]
        }]
    ))
}

差不多吧。您的onChange只需调用该函数：

onChange={(e)=>{onCheckboxChanged(whichProperty, "checklist", e.target.checked)}}

编辑3:我建议你在你的UI中添加一个“测试”按钮。当您按下它时，它将向服务器发送有效负载。只是硬编码有效载荷。让它起作用。然后做1复选框，并更新您的代码，以便您可以更改复选框，当您按下“测试”，它将发送该值到您的服务器。如果您想要更新服务器，请更改复选框，然后添加该功能(但只有一个复选框)。然后添加另外两个复选框，但只有一个属性。最后，更新代码以支持多个属性。迈出一小步。只需工作一段时间，然后再进行扩展。也许-别在这个问题上工作了。只需花3-7个小时学习一些教程，当你回来的时候，你会很快就能完成任务。