React hook form: как вбить в поле значение из props?

Question

Есть компонент, который использует кастомные инпуты (CustomInput) и принимает некоторые пропсы (data). Мне нужно, чтобы значения из пропсов сразу подставлялись в инпут при монтировании компонента. Как это сделать? Я попробовал вписать значения из пропса в defaultValues, но это не помогает.

export const EditPackages = ({action, data}: Props) => {
  const { control, handleSubmit, formState:{ errors } } = useForm({
    resolver: yupResolver(EditPackagesSchema),
    defaultValues: {
      price: data.price,
    },
  });

  const onSubmit: SubmitHandler<IEditPackages> = (data: IEditPackages) => {
    //...
  };

  return (
    <div className={styles.popup}>
      <form 
        onSubmit={handleSubmit(onSubmit)}
      >
        <Controller
          name="price"
          control={control}
          render={({ field }) => <CustomInput 
            placeholder='Price'
            value={field.value} 
            handleChange={field.onChange}
          />}
        />
        <DialogButtons
          type='submit'
        />
      </form>
    </div>
  );
}

Answer 1

Используйте setValue для изменения полей

setValue("имя поля", "а тут значение поля")

setValue первым аргументом принимает имя из defaultValues, в вашем случае это price. А вторым аргументом значение на которое хотите поменять.

export const EditPackages = ({action, data}: Props) => {
  const { control, handleSubmit, setValue, formState:{ errors } } = useForm({
    resolver: yupResolver(EditPackagesSchema),
    defaultValues: {
      price: "", // Тут уже надо дать значение по умолчанию
    },
  });

  useEffect(() => {
    setValue("price", data.price)
  }, [data.price]);

  // ..

БЛОГ НА HUSL

React hook form: как вбить в поле значение из props?

Ответы (1 шт):