React Native: Форма добавления записи с Formik (Урок 10)

Этот урок посвящен созданию формы для добавления новых записей в приложение с использованием библиотеки formik. Ранее мы использовали компоненты TextInput.

Установка Formik

Установите библиотеку formik с помощью команды (команда предоставляется отдельно).

Компонент формы (Form.js)

Создайте компонент Form.js в папке components. Часть кода можно скопировать из FullInfo.js, удалив ненужные стили и возвращаемые значения. Переименуйте функцию в Form. Удалите ненужные импорты, оставив React, Button, TextInput, и глобальные стили. Импортируйте Formik из библиотеки formik.

import React from 'react';
import { Button, TextInput, StyleSheet } from 'react-native';
import { Formik } from 'formik';

Структура компонента Formik

Оборачиваем компонент Formik в View. Внутри Formik описываем поля формы.

<Formik
  onSubmit={values => console.log(values)}
  initialValues={{ name: '', announcement: '', fullText: '', url: '' }}>
  {/* Поля формы */}
</Formik>

onSubmit — обработчик отправки формы. initialValues устанавливает начальные значения полей (name, announcement, fullText, url).

Поля формы

Добавляем поля формы с помощью TextInput, используя JSX. Каждый TextInput привязывается к полю из initialValues через props. Добавляем placeholder и onChangeText.

<TextInput
  value={props.values.name}
  onChangeText={text => props.setFieldValue('name', text)}
  placeholder="Введите название"
  style={{ borderWidth: 1, borderColor: 'silver', borderRadius: 5, padding: 20, marginTop: 15 }}
/>
<TextInput
  value={props.values.fullText}
  onChangeText={text => props.setFieldValue('fullText', text)}
  placeholder="Введите статью"
  multiline
  style={{ borderWidth: 1, borderColor: 'silver', borderRadius: 5, padding: 20, marginTop: 15 }}
/>

Аналогично добавляем поля для announcement и url со стилями.

Кнопка отправки

Добавляем кнопку Button с обработчиком onPress, вызывающим handleSubmit из Formik.

<Button title="Добавить" onPress={props.handleSubmit} />

Отображение формы (модальное окно)

Подключаем компонент Form и отображаем его в модальном окне (детали опущены).

Добавление статьи (addArticle)

Функция addArticle добавляет статью в массив статей, используя setState. Генерируется случайный ключ для уникальности.

const addArticle = (article) => {
  const newArticle = { ...article, id: Math.random().toString(36).substring(2) };
  setArticles([...articles, newArticle]);
  setModalWindow(false);
};

setModalWindow закрывает модальное окно.

Передача функции в Form

Передаем addArticle в Form как параметр: <Form addArticle={addArticle} />. В Formik вызываем addArticle и resetForm в onSubmit:

<Formik
  onSubmit={values => {
    addArticle(values);
    props.resetForm();
  }}
  // ...
>

Создана функциональная форма для добавления записей с использованием formik. Форма позволяет вводить название, анонс, полный текст и URL. Добавлены стили. Дальнейшая работа может быть направлена на улучшение стилей и добавление валидации.