Как установить значения по умолчанию формы хука реакции при использовании контроллера с пользовательскими компонентами

Что я пытаюсь сделать:

  • Укажите значения по умолчанию для моих пользовательских контролируемых компонентов rhf и обновите их, как неконтролируемый компонент rhf.
  • Лучше понять, как контроллер устанавливает значения по умолчанию, чтобы я мог устранять неполадки.

Моя проблема:

  • Я могу установить значения по умолчанию только с неконтролируемым компонентом rhf, как показано в документации. Например, создав объект defaultValues со значением по умолчанию для каждого входа, а затем вызвав reset({...defaultValues}) в useEffect при загрузке страницы.
  • Я не понимаю, как rhf передает/устанавливает значения по умолчанию с помощью Controller

Примеры:

Codesandbox здесь

// Parent form component (RegistrationForm.tsx)

      // set up form default values
      const defaultValues = {
        standardRadio: "mint",
        registerRadio: "supercross"
      };
    
      // fill in default values on load
      useEffect(() => {
        reset({ ...defaultValues });
      }, []);

 // DOESN'T WORK: Can't set the default value of WrapperRadioGroup 
      <WrapperRadioGroup
        name = "standardRadio"
        groupLabel = "This is a radio group label"
        control = {control}
        style = "standard"
        defaultValue = " "
        options = {[
          { value: "orange", label: "Orange ice cream" },
          { value: "mint", label: "Mint ice cream" },
          { value: "chocolate", label: "Chocolate ice cream" },
          { value: "vanilla", label: "Vanilla ice cream" }
        ]}
      />

// Default value set properly using the following uncontrolled component
  <input
    {...register("registerRadio")}
    id = "registerRadio1"
    type = "radio"
    value = "motogp"
  />
  <label htmlFor = "registerRadio1">Moto GP</label>
...
  <input
    {...register("registerRadio")}
    id = "registerRadio4"
    type = "radio"
    value = "islemantt"
  />
  <label htmlFor = "registerRadio4">Isle of Man TT</label>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
156
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Догадаться. При использовании контроллера нет необходимости передавать свойство defaultValue родительскому компоненту, так как это переопределит значение, используемое контроллером RHF. RHF берет значение, которое вы установили в своем объекте defaultValues, а затем делает его текущим value для ввода.

Пример:

  1. Установите значения по умолчанию для всех ваших входов через объект. (Ключ: input's name значение: input default value).
    const defaultValues = {
       standardRadio: "mint",
       registerRadio: "supercross"
     }
  1. Используйте reset() для обновления входных данных формы. Смотрите документацию.

    useEffect(() => {
      reset({ ...defaultValues });
     }, []);

  1. Не передавайте свойство defaultValue контролируемому компоненту. Если вы это сделаете, это переопределит значение контроллера RHF.
     <WrapperRadioGroup
        name = "standardRadio"
        groupLabel = "This is a radio group label"
        control = {control}
        style = "standard"
    =>  defaultValue = " " // !! DON'T PASS A DEFAULTVALUE PROP. OVERRIDES RHF's CONTROLLER
        options = {[
          { value: "orange", label: "Orange ice cream" },
          { value: "mint", label: "Mint ice cream" },
          { value: "chocolate", label: "Chocolate ice cream" },
          { value: "vanilla", label: "Vanilla ice cream" }
        ]}
      />

  1. Если вам нужно значение по умолчанию в контролируемом компоненте ввода, получите доступ к нему через props.value

Другие вопросы по теме