reactjs - ChakraUI 不确定（父/子）复选框不适用于 React Hook 表单

Question

我正在尝试复制ChakraUI 文档中提出的父子复选框的这种想法。

我有一个用于父复选框的数组和一个用于子复选框的数组。我遍历父复选框，并在每次迭代中遍历其相应的子复选框并从中创建一个表。

问题是：每当我添加 React-hook-form 的“{...register()}”时，复选框就会停止工作。

• 当我点击它时，视觉上什么也没有发生（但当我点击提交时，我可以看到它的值已通过 console.log 更改）。

• 此外，如果我单击父复选框然后提交，则注册函数不会捕获子复选框上的值变化，并且 console.log 返回一个对象，就好像子复选框仍未选中一样。

这是它的样子的视频。

对于“语言环境”，permissaoFilha=childPermission和permissaoPai= parentPermission。我的复选框代表启用和禁用的权限。

这是我正在渲染的内容：

return (
    <>
      <Flex as="form" flexDir="column" onSubmit={handleSubmit(submitPermissoes)}>
            <Button type="submit" size="sm" colorScheme="green" mr="2">
              Save
            </Button>
          </PageHeader>
          <Table>
            <Thead>
              <Tr>
                <Th>
                  Name
                </Th>
              </Tr>
            </Thead>
            <Tbody>
              {!loading ? permissoesPai.map((permissaoPai) => {
                return (
                  <React.Fragment key={permissaoPai.id}>
                    <Tr>
                      <Td>
                        <Checkbox
                          isChecked={allChildrenMarked(permissaoPai.id)}
                          isIndeterminate={isIndeterminate(permissaoPai.id)}
                          onChange={(e) => toggleCheckedPai(e, permissaoPai.id)}
                          defaultChecked={initChecked(permissaoPai.nome)}
                        >
                        </Checkbox> {permissaoPai.nome}
                      </Td>
                    </Tr>
                    {permissoesFilhas.map((permissaoFilha) => {
                      if (permissaoFilha.pai === permissaoPai.id) {
                        return (
                          <Tr key={permissaoFilha.id}>
                            <Td>
                              <FormControl
                              >
                                <Checkbox
                                  name={permissaoFilha.nome}
                                  isChecked={permissaoFilha.checked}
                                  onChange={(event) => toggleCheckedFilha(event, permissaoFilha.id)}
                                  defaultChecked={initChecked(permissaoFilha.nome)}
                                  value={permissaoFilha.checked}
                                  {...register(`${permissaoFilha.nome}`)}
                                 >
                                </Checkbox> {permissaoFilha.nome}
                              </FormControl>
                            </Td>
                          </Tr>
                        )
                      }
                    })}
                  </React.Fragment>
                )
              })
                : ''}
            </Tbody>
          </Table>
      </Flex>
    </>
  )

这是上面的逻辑：

  const { register, handleSubmit, formState } = useForm();

  const submitPermissoes = (permissions) => {
     console.log(permissions);
  }

  // separates checkboxes in different arrays for parents and children
  const separatePermissions = () => {
    setPermissoesPai(permissoesArray.current.filter((permissao) => !permissao.pai ? permissoesPai.push(permissao) : ''));
    setPermissoesFilhas(permissoesArray.current.filter((permissao) => permissao.pai ? permissoesFilhas.push(permissao) : ''));
  }

// toggles the checked property of all the children of a parent checkbox
  const toggleCheckedPai = (event, idPermissaoPai) => {
    const checked = event.target.checked;

    setPermissoesFilhas(permissoesFilhas.map((permissaoFilha) => {
      if (permissaoFilha.pai === idPermissaoPai) {
        permissaoFilha['checked'] = checked;
      }

      return permissaoFilha;
    }));
  }
// toggles the checked property of a child checkbox
  const toggleCheckedFilha = (event, idPermissaoFilha) => {
    const checked = event.target.checked;

    setPermissoesFilhas(permissoesFilhas.map((permissaoFilha) => {
      if (permissaoFilha.id === idPermissaoFilha) {
        permissaoFilha['checked'] = checked;
      }

      return permissaoFilha;
    })
    );
  }

// checks if the parent checkbox is indeterminate
  const isIndeterminate = (idPermissaoPai) => {
    let filhas = permissoesFilhas.filter((permissaoFilha) => permissaoFilha.pai === idPermissaoPai);

    const allChecked = filhas.every((permissaoFilha) => permissaoFilha.pai === idPermissaoPai && permissaoFilha.checked);

    return filhas.some((permissaoFilha) => permissaoFilha.pai === idPermissaoPai && permissaoFilha.checked && !allChecked);
  }

// checks if all child checkboxes are marked
  const allChildrenMarked = (idPermissaoPai) => {
    let filhas = permissoesFilhas.filter((permissaoFilha) => permissaoFilha.pai === idPermissaoPai);

    return filhas.every((permissaoFilha) => permissaoFilha.checked);
  }

我可以用来解决这个问题的任何想法或替代方法吗？

标签： reactjsnext.jsreact-hook-formchakra-ui