Недавно я хотел создать форму ввода текста, которая выглядит следующим образом:
Основной функционал состоит из следующих функций:
- Вставка названия вопроса в текстовый ввод названия вопроса
- Вставка вариантов ответа для данного вопроса в текстовые поля выбора
- Создание новых текстовых полей выбора путем нажатия кнопки «плюс»
Я решил, что это хороший вариант использования ловушки 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.
Если у вас есть вопросы, оставьте их в комментариях.