Эта статья является продолжением части I, где мы добавили RHF в наше настоящее приложение React-National. Пожалуйста, убедитесь, что вы прочитали первую часть для некоторого контекста.
Теперь мы посмотрим, как предварительно заполнить наши поля с помощью данных, извлеченных с сервера.
Давайте сделаем запрос, чтобы получить Эл. адрес и Имя фиктивного пользователя от JSONDOLLER Отказ Мы добавляем этот блок кода перед return () Заявление внутри нашего компонента (нам может потребоваться импортировать Useffect от реагировать Если он еще не импортируется).
useEffect(() => {
fetchUser();
}, []);
const fetchUser = async () => {
try {
const response = await fetch(
'https://jsonplaceholder.typicode.com/users/1'
);
const { name, email } = await response.json();
} catch (error) {}
};
Теперь, когда у нас есть Email и Имя Значения, нам нужно прикрепить их к нашей форме. Для этого мы будем использовать SetValue Функция от RHF.
// add setValue to the list of destructured functions
const { handleSubmit, control, errors, setValue } = useForm();
// inside fetchUser function
const { name, email } = await response.json();
setValue('name', name);
setValue('email', email);
Теперь, когда мы запускаем наше приложение, мы заметим, что имя и поля электронной почты заполнены некоторыми значениями.
Мы можем редактировать эти значения, и когда мы нажимаем на отправку, все правила проверки должны работать, как ожидалось.
Теперь давайте посмотрим, как мы можем добавить условные поля в нашу форму, используя RHF. В нашем нынешнем примере мы используем Уместите контролировать переключение двух дополнительных полей.
Теперь мы подключим ваш коммутатор к своей форме. Для этого мы Оберните нашу <Выключатель/> Компонент внутри Контроллер от RHF.
( )} />
Теперь нам нужно показать/скрыть дополнительные поля, основанные на значении IsbillingDifferent Отказ Для этого мы будем использовать Смотреть Функция от RHF. Он смотрит на указанные входы и возвращает их значение.
// add watch to the list of destructured functions from useForm
const { ...others, watch } = useForm();
// watch isBillingDifferent as it changes
const isBillingDifferent = watch('isBillingDifferent');
Убедитесь, что мы также удалите IsbillingDifferent Укажите, что мы имели в нашем коде.
// delete the following line const [isBillingDifferent, setIsBillingDifferent] = useState(false);
Там у нас есть! Теперь дополнительные поля будут слушать IsbillingDifferent Значение, чтобы определить, нужно ли им рендерировать. Единственное, что уходит для нас сейчас, – это провести дополнительные поля в RHF.
( onChange(text)} value={value} placeholder="Billing Name" /> )} /> ( onChange(text)} value={value} placeholder="Billing email" /> )} />
Теперь у нас есть полнофункциональная форма с проверкой, предварительно заполненными данными и условными полями! Этот пример, однако, только царапает поверхность того, что может сделать RHF. Я всегда боролся с формами, а RHF, безусловно, самая простая реализация, которую я видел до сих пор! Дайте мне знать, что ваше предпочтительное решение для форм в реакции.
Спасибо за чтение и дайте ему ❤️, если вы нашли это полезным! Счастливое кодирование!
Оригинал: “https://dev.to/sankhadeeproy007/using-react-hook-form-with-react-native-part-ii-pre-filled-values-conditional-fields-ik1”