Посмотрим правде в глаза, формы трудны для всех, особенно в React. Если вы - младший разработчик, это может быть совершенно страшно, и вам могут потребоваться часы поиска в Google, чтобы доставить их туда, где вы хотите. Однако мы надеемся, что эта статья поможет ускорить разработку компонентов формы.

Компонент, который я собираюсь создать, прост для новичков. Я дам вам пошаговое объяснение того, как построить форму. Эта форма использует React Bootstrap и стилизованные компоненты, если вы не знакомы с React Bootstrap или хотите узнать больше о моем путешествии с ним, прочтите об этом здесь. Вы можете использовать эту форму и без нее, но вам придется добавить свои собственные стили CSS либо через 100% стилизованные компоненты, либо через таблицу стилей.

А теперь самое интересное, давайте взглянем на код в целом. Тогда мы это разберем.

Давайте посмотрим на код:

Это много кода. Не беспокойтесь, мы разберем его и вместе проанализируем, чтобы вы могли построить его самостоятельно и, самое главное, чтобы вы поняли, что он делает.

Сначала мы импортируем все наши пакеты, необходимые для создания формы.

import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import styled from 'styled-components';

Вы заметите, что вместо импорта формы и кнопки из response-bootstrap я импортировал их отдельно. Это сделано для того, чтобы уменьшить нагрузку на браузер, и мы заставляем пользователя загружать только то, что им действительно нужно, чтобы заставить компонент для рендеринга, не более того. Это способствует более плавному взаимодействию с пользователем.

Затем мы создаем наш компонент без состояния с помощью props. Затем мы деструктурируем наши реквизиты, которые нам понадобятся, чтобы сделать нашу форму завершенной. Это все реквизиты, которые нам нужно будет передать в форму для отображения нужной нам информации.

Если вы не знакомы с синтаксисом ES6 здесь, это просто сокращение для

props.cancel, props.errors, props.submit, props.elements, etc..

Если вы хотите узнать больше о разрушении свойств или объектов в целом, зацените это.

Функции формы

Затем давайте создадим наши функции событий для обработки действий отправки и отмены в форме. Если вы когда-либо создавали форму, вы быстро это поймете. Единственное отличие - это функция submit (), которую вы должны создать в другом компоненте и передать этой функции через реквизиты.

Помните, что мы не пытаемся создать здесь полную форму. Мы просто хотим создать что-то, что мы сможем захватить в любое время, когда нам понадобится каркас формы ...

Затем мы создаем наш компонент обработки ошибок. Это обрабатывает и отображает все наши ошибки в нашей форме. Фактически вы можете взять этот компонент и поместить его в собственный файл. Но поскольку они довольно хорошо связаны между собой, я храню их в одном файле.

Сначала мы передаем "props.errors". Затем мы создаем переменную, которая в конечном итоге будет отображать то, что видит пользователь.

Затем мы настраиваем условное выражение, которое спрашивает, есть ли какие-либо переданные ошибки. Если есть ошибки, мы создаем выражение JSX, сопоставляем ошибки и показываем их в элементе списка. Помните, чтобы добавить ключ, вы получите ошибку от React.

Наконец, мы заключаем JSX-выражение в неупорядоченный список и даем ему метку, чтобы пользователь знал, что он на него смотрит. Если вам интересно, что такое React.Fragment , это, по сути, способ обернуть JSX без добавления div, который добавляет дополнительные узлы в DOM. Если вы хотите узнать, как его использовать, или вам интересно, что он делает. Вы можете проверить это здесь

Вернуть JSX

Наконец, мы собираем все и возвращаем это внутри нашего оператора return. Мы должны убедиться, что передаем наши реквизиты в наш компонент ErrorsDisplay. Мы добавляем нашу функцию handleSubmit в нашу форму, поэтому, когда мы нажимаем кнопку отправки, она отправляет форму. Кроме того, мы добавляем нашу функцию handleCancel к нашей кнопке отмены с помощью действия onClick.

Вы заметите, что у нас нет никаких «вводных» в этой форме. Возможно, вы думаете, что мы что-то упустили. На самом деле он находится в выражении JSX прямо под формой под названием «elements ()».

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

Вам также, вероятно, интересно, что такое <> & </>. Это тот же <React.Fragment>, который вы видели ранее, только в более коротком синтаксисе. Круто, да?

Реализация нашей формы

Теперь у нас есть форма, которую мы можем использовать где угодно. Все, что нужно для реализации, - это передать наши реквизиты.

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

Заключение

Итак, у вас есть форма, которую вы создаете сами, которая обрабатывает все, что вам нужно. Он очень гибкий, и его можно масштабировать в соответствии с вашими потребностями. Надеюсь, это было полезно, и вы кое-чему научились.