Что я пытаюсь сделать:
Моя проблема:
defaultValues
со значением по умолчанию для каждого входа, а затем вызвав reset({...defaultValues})
в useEffect
при загрузке страницы.Controller
Примеры:
// 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>
Догадаться. При использовании контроллера нет необходимости передавать свойство defaultValue
родительскому компоненту, так как это переопределит значение, используемое контроллером RHF. RHF берет значение, которое вы установили в своем объекте defaultValues
, а затем делает его текущим value
для ввода.
Пример:
input's name
значение: input default value
). const defaultValues = {
standardRadio: "mint",
registerRadio: "supercross"
}
useEffect(() => {
reset({ ...defaultValues });
}, []);
<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" }
]}
/>
props.value