Блог

Главная - Вопросы по программированию - React-hook-форма не изменяет действительность формы при изменении React-Select

React-hook-форма не изменяет действительность формы при изменении React-Select

#reactjs #react-select #react-hook-form

Вопрос:

У меня есть форма react-hook с функцией react-select:

  • Когда я изменяю значение react-select, форма становится одновременно грязной и допустимой.
  • Кнопка отправить теперь включена, и форма может быть отправлена.
  • Как только форма отправлена, useForm значения по умолчанию сбрасываются до новых значений
  • Кнопка «Отправить» снова отключена, ожидая изменения формы.
  • Когда я снова изменяю значение react-select, форма не загрязняется. Кнопка остается отключенной. Тем не менее, значение react-select изменилось.

Я перепробовал почти все: заменить onChange на setValue("name", value, {shouldDirty: true} и т. Д.

Вот код:

 import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

const options = [
  { value: "joe", label: "Joe" },
  { value: "jack", label: "Jack" },
  { value: "averell", label: "Averell" }
];

type Data = { name: string; surname: string };
export default function Form({
  defaultValues,
  onSend
}: {
  defaultValues: Data;
  onSend: (data: Data) => void;
}) {
  const {
    register,
    handleSubmit,
    reset,
    getValues,
    control,
    formState: { isValid, isDirty }
  } = useForm({
    mode: "onChange",
    defaultValues
  });

  const onSubmit = (data: Data) => {
    onSend(data);
    reset(getValues());
    console.log("data sent!", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
     
        <Controller
          control={control}
          name="name"
          render={({ field }) => (
            <Select
            {...field}
              value={field.value}
              options={options}
              onChange={(v) => field.onChange(v)}
            />
          )}
        />
      <input placeholder="surname" {...register("surname")}/>
    
     
        <button type="submit" disabled={!isValid || !isDirty}>
          submit
        </button>

    </form>
  );
}

Как это исправить?

ps: здесь также есть песочница: https://codesandbox.io/s/react-hook-form-test-8tdq3?file=/src/FormController.tsx

Ответ №1:

Итак, ответ заключается в том, что мне нужно было добавить эффект использования для сброса значений формы после отправки:

 useEffect(() => {
    if (formState.isSubmitSuccessful) {
      reset(getValues());
    }
  }, [formState, getValues, reset]);
Метки: