reactjs - Radio button triggers errors - Stack Overflow

admin管理员组

文章数量:1410688

I have a problem with my form.

First of all, instead of testing this form on a modal, I tested on a page.

I am getting the following error on the modal but not the page. The error is triggered when I click Admin a second time. If I do the same thing to Benutzer, it behaves normally. The error is also only visible in the first render.

I am waiting for your response, thanks and have a nice day.

  export type Roles = (typeof roles)[number]["id"];
  export const roles = [{ id: "admin" }, { id: "member" }] as const;

              <FormField
                label="Rolle"
                direction="column"
                error={errors.role?.id}
              >
                {({ required, isInvalid }) =>
                  HBK.roles.map((role, i) => (
                    <Radio
                      key={i}
                      {...register("role.id", {
                        required,
                      })}
                      value={role.id}
                      label={i18n.role[role.id]}
                      isInvalid={isInvalid}
                    />
                  ))
                }
              </FormField>

import classNames from "classnames";
import { JSX, ReactNode, Ref } from "react";
import FormField from "./FormField";
import styles from "./Radio.module.css";

type RadioProps = JSX.IntrinsicElements["input"] & {
  isInvalid?: boolean;
  label: ReactNode;
  description?: string;
  ref: Ref<HTMLInputElement>;
};

const Radio = ({
  ref,
  isInvalid,
  label,
  description,
  ...props
}: RadioProps) => {
  return (
    <div className={styles.radio}>
      <label className={styles.label} htmlFor={props.id}>
        <input
          ref={ref}
          type="radio"
          {...props}
          className={classNames(styles.input, {
            [styles.invalid]: isInvalid,
            
          })}
        />
        {label}
      </label>
      {description && <FormField.Help>{description}</FormField.Help>}
    </div>
  );
};

export default Radio;

import {
  Description,
  Dialog,
  DialogPanel,
  DialogTitle,
  Transition,
} from "@headlessui/react";
import classNames from "classnames";
import { ReactNode } from "react";
import { DefaultValues, FieldValues, SubmitHandler } from "react-hook-form";
import Button from "./Button";
import Form, { FormChildrenProps } from "./Form";
import Icon from "./Icon";
import styles from "./Modal.module.css";
import SvgClose from "./icon/Close.svg?react";

interface Props<TFieldValues extends FieldValues> {
  title: string;
  isOpen: boolean;
  onClose: () => void;
  onSubmit?: SubmitHandler<TFieldValues>;
  description?: ReactNode;
  submitText?: string;
  showAbort?: boolean;
  defaultValues?: DefaultValues<TFieldValues> | undefined;
  isScrollable?: boolean;
  className?: string;
  children:
    | ReactNode
    | ((useFormProps: FormChildrenProps<TFieldValues>) => ReactNode);
}

const Modal = <TFieldValues extends FieldValues>(
  props: Props<TFieldValues>,
) => {
  const {
    title,
    description,
    isOpen,
    submitText = "Speichern",
    showAbort = true,
    children,
    isScrollable = false,
    defaultValues,
    className,
    onClose,
    onSubmit,
  } = props;

  return (
    <Transition appear show={isOpen}>
      <Dialog as="div" className={styles.overlay} onClose={onClose}>
        <DialogPanel className={classNames(styles.dialog, className)}>
          <DialogTitle className={styles.title}>
            <div className={styles.header}>
              <Button layout="text" buttonProps={{ onClick: onClose }}>
                <Icon className={styles.cancelIcon} glyph={SvgClose} />
              </Button>
            </div>
            {title}
          </DialogTitle>
          <Description>{description}</Description>
          <Form<TFieldValues>
            onSubmit={onSubmit}
            defaultValues={defaultValues}
            secondaryButton={
              showAbort ? (
                <Button
                  layout="hollow"
                  buttonProps={{
                    onClick: onClose,
                  }}
                >
                  Abbrechen
                </Button>
              ) : undefined
            }
            submitText={submitText}
          >
            {(formProps) => (
              <div
                className={classNames(styles.form, {
                  [styles.isScrollable]: isScrollable,
                })}
              >
                {typeof children === "function"
                  ? children(formProps)
                  : children}
              </div>
            )}
          </Form>
        </DialogPanel>
      </Dialog>
    </Transition>
  );
};

export default Modal;

本文标签： reactjsRadio button triggers errorsStack Overflow