Скопируйте ввод формы из формы другого компонента - Форма крючка реакции

#reactjs #typescript #forms #watch #react-hook-form

Вопрос:

У меня есть два компонента React, которые имеют одинаковые поля формы. Существует флажок, который должен отражать ввод из формы в другом компоненте, если он установлен.

Та же концепция, что и функциональность «тот же адрес, что и для выставления счетов», но формы находятся в отдельных компонентах.

Я пытаюсь использовать «часы» формы React Hook, но я не уверен, как передать входные данные из компонента: FormOne в компонент: FormTwo.

Вот мой код: Песочница кода

1. Является ли это требованием, чтобы вам нужно было разделить входные данные на две формы? По семантическим соображениям (а также для того, чтобы сделать это намного проще) для вашей страницы должен быть только один элемент формы, так как эти два поля в некотором роде также принадлежат друг другу.

2. @knoefel Я только вношу изменения в существующее приложение, и эти формы, которые будут обмениваться данными, являются лишь небольшими частями компонентов (форм), в которых они находятся.

Ответ №1:

Поскольку вы используете useForm несколько раз, вы не можете использовать предоставленные RHF <FormProvider /> .

Таким образом, в основном у вас есть следующие варианты:

произведите рефакторинг ваших <Form /> компонентов, чтобы все они использовали одни и те же методы, возвращаемые с useForm помощью RHF <FormProvider /> , вместо определения useForm для каждого <Form /> компонента.
используйте контекстный API React, чтобы получить доступ к состоянию формы в каждом дочернем <Form /> компоненте
передавайте значения и задатчики с помощью реквизитов

Вот кодовое поле, использующее RHF <FormProvider / >:

Вот кодовое поле, использующее контекстный API:

1. Спасибо! Почему данные, которые регистрируются в консоли, относятся ко второму полю формы только тогда, когда я отправляю форму?

2. Ваша кнопка отправки является частью <FormTwo /> , поэтому onSubmit будут включены только поля , в которых вы зарегистрированы <FormTwo /> . Вот почему я предложил использовать только 1 useForm , тогда у вас будет доступ ко всем зарегистрированным полям. Поэтому на данный момент, и если вы не хотите рефакторировать все компоненты, вы должны использовать значение Context значений вашей формы при отправке. Вот обновленный CodeSandbox

3. Я обновил свой ответ, показав вам предпочтительный подход к решению этой ситуации. Все, что вам нужно для рефакторинга, — это добавить RHF <FormProvider /> и использовать методы RHF через useFormContext хук. Таким образом, вы можете передать defaultValues их на родительском уровне вместо того, чтобы передавать их все через реквизит.