reactjs - React hook form useController TypeScript-typfel

Jag försöker dela upp koden i detta exempel: https://codesandbox.io/s/usecontroller-0o8px

men jag får ett typfel när jag skickar control={control} till inputkomponenten.

(JSX attribute) control?: Control<FieldValues, object> | undefined
Type 'Control<formValues, object>' is not assignable to type 'Control<FieldValues, object>'.
  The types of '_options.resolver' are incompatible between these types.
    Type 'Resolver<formValues, object> | undefined' is not assignable to type 'Resolver<FieldValues, object> | undefined'.
      Type 'Resolver<formValues, object>' is not assignable to type 'Resolver<FieldValues, object>'.ts(2322)
controller.d.ts(22, 5): The expected type comes from property 'control' which is declared here on type 'IntrinsicAttributes & { label?: string | undefined; supportive?: string | undefined; } & UseControllerProps<FieldValues, string> & InputHTMLAttributes<...> & { ...; }'

Här är min inmatningskomponent

type Props = {
  label?: string
  supportive?: string
} & UseControllerProps &
  InputHTMLAttributes<HTMLInputElement>

const InputComp: FC<Props> = ({ label, supportive, ...props }) => {

  ...

  const {
    field,
    fieldState: { invalid, isTouched, isDirty },
    formState: { touchedFields, dirtyFields },
  } = useController(props)

  return <input {...field} />
}

när jag anger formValues-typen till UseControllerProps<formValues> försvinner felet.

Jag vill använda inmatningskomponenten i olika formulär med olika formValues. Hur kan jag uppnå det?

Svar #1

Jag hade samma problem men jag hittade den här artikeln och killen löste det genom att skicka en T-props som utökas i en komponent

https://dev.to/texmeijin/component-design-idea-using-react-hook-form-v7-ie0

Svar #2

Här är en lösning som fungerade för mig. Jag använde detta och länken till den ursprungliga kodsnutten för hjälp.

Jag har en återanvändbar Headless UI ListBox-komponent som jag ville skicka rullgardinsvärden till tillsammans med mitt ursprungliga formulärgränssnitt.

Referens till React Hook Form:s ursprung:

enum State {
  AL = "AL",
  ...
}

export interface UserRegistration {
  firstName: string
  lastName: string
  streetAddress: string
  streetAddress2: string
  city: string
  state: State
  zipCode: string
}

const registration = () => {

  const {
    control
  } = useForm<UserRegistration>()

  return (
    ...
    
    <Dropdown
      control={control}
      name="state"
      dropdownOptions={State}
    />
  )
}

Återanvändbar komponent:

import { Fragment } from 'react'
import { Listbox, Transition } from '@headlessui/react'
import { useController, UseControllerProps } from 'react-hook-form'    

interface DropdownProps {
  dropdownOptions: any
}

const Dropdown = (props: DropdownProps & UseControllerProps<UserRegistration>) => {
  const {
    field: { value, onChange },
  } = useController(props)

  return (
    <div>
      <Listbox value={value} onChange={onChange}>
        <div className="relative">
          <Listbox.Button>
            <span>{value}</span>
            <span>
              <SelectorIcon aria-hidden="true" />
            </span>
          </Listbox.Button>
          <Transition
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options>
              {Object.keys(props.dropdownOptions).map((value, index) => (
                <Listbox.Option
                  key={index}
                  value={value}
                >
                  {({ selected }) => (
                    <>
                      <span>
                        {value}
                      </span>
                      {selected ? (
                        <span>
                          <CheckIcon aria-hidden="true" />
                        </span>
                      ) : null}
                    </>
                  )}
                </Listbox.Option>
              ))}
            </Listbox.Options>
          </Transition>
        </div>
      </Listbox>
    </div>
  )
}

Relaterade artiklar