Недавно я хотел создать форму ввода текста, которая выглядит следующим образом:

Основной функционал состоит из следующих функций:

  • Вставка названия вопроса в текстовый ввод названия вопроса
  • Вставка вариантов ответа для данного вопроса в текстовые поля выбора
  • Создание новых текстовых полей выбора путем нажатия кнопки «плюс»

Я решил, что это хороший вариант использования ловушки useReducer, поскольку мне нужно было динамически создавать обработчики ввода текста и сохранять входные значения в состоянии.

В этой статье я хотел бы показать вам, как я создал настраиваемый хук для этой формы и использовал его в указанном выше компоненте.

Сначала мы рассмотрим редюсер для useReducer хука. Затем мы рассмотрим настраиваемый хук для нашей формы. Наконец, мы реализуем компонент формы с помощью нашего настраиваемого крючка.

Редуктор

Сначала мы устанавливаем начальное состояние редуктора. Это содержит:

  • questionTitle: заголовок вопроса.
  • choiceInputs: уникальный идентификатор, значение и заполнитель для каждого ввода выбора. Мы предварительно заполняем его двумя элементами, потому что хотим, чтобы у каждого вопроса было как минимум два варианта ответа.
  • nextChoiceId: уникальный идентификатор для следующего ввода выбора, который будет создан.

В редукторе мы обрабатываем три действия:

  • QUESTIONS_TITLE_CHANGED: изменяет заголовок вопроса.
  • CHOICE_VALUE_CHANGED: изменяет значение выбора на основе предоставленного идентификатора.
  • NEW_CHOICE_ADDED: создает новый элемент ввода выбора и увеличивает nextChoiceId.

Пользовательский крючок

Давайте воспользуемся редюсером, который мы создали с помощью useReducer, в нашем настраиваемом хуке и выставим state и dispatch.

Компонент формы

Давайте воспользуемся нашим настраиваемым крючком в компоненте формы.

Компонент просто использует состояние и отправляет действия при определенных событиях. Все обновления состояния обрабатываются отдельно в нашем настраиваемом хуке.

Резюме

Правильно используя перехватчики React, можно сделать реализацию форм ввода текста в React Native простой и удобной в обслуживании.

Вы можете найти полный пример проекта здесь: https://github.com/aarkalyk/react-native-polls-api-example.

Если у вас есть вопросы, оставьте их в комментариях.