На прошлой неделе я работал над реализацией контактной формы с помощью React. Поскольку я также изучал React Hooks, я решил реализовать свою контактную форму в качестве функционального компонента и использовать React Hooks вместо передачи реквизитов из App.js или хранения локального состояния в самом компоненте ContactForm.
Требования
- Контактная форма будет иметь 4 поля ввода: имя, адрес электронной почты, тему и сообщение в свободной форме.
- Кнопка отправки под полями ввода
- Картинка слева от полей ввода
- Проверка формы, чтобы проверить, являются ли поля ввода пустыми или введенное электронное письмо не является допустимым вводом
- Если есть какие-либо ошибки, покажите красный текст прямо над кнопкой «Отправить», сообщающий, какое поле ввода пустое / недействительное.
- Если все поля ввода верны, отобразится предупреждение с текстом «Электронное письмо отправлено».
Компонент контактной формы
Я реализую контактную форму как функциональный компонент, используя ловушку useState для хранения моего состояния. Перехватчик useState позволяет добавлять состояние React к функциональным компонентам. Во-первых, я создал переменные состояния для всех полей ввода. Функция useState принимает начальное значение вашей переменной. Поскольку все наши переменные являются строками, я инициировал их, используя пустую строку в качестве параметров useState.
P.S. Я использую библиотеку material-ui для реализации элементов формы.
import React, { useState } from "react"; import { TextField, Button } from "@material-ui/core"; function CountactUs() { const [email, setEmail] = useState(""); const [name, setName] = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); return( <div> <form> <form> </div> )
UseState возвращает пару значений: текущее состояние и функция, которая его обновляет. Затем мы деструктурируем возвращенные значения, используя следующий синтаксис.
const [subject, setSubject] = useState("");
Чтобы захватить ввод от пользователя, мы используем функцию, возвращаемую useState, для которой задана функция onChange текстовых полей, и переменные состояния, обновляемые с помощью e.target.value (event.target.value). В приведенном ниже коде регистрируются любые изменения в текстовых полях и устанавливаются соответствующие переменные состояния.
<form> <TextField label="Name" type ="text" onChange = {e => setName({name: e.target.value})}/> <TextField label="Email" type ="email" onChange ={e => setEmail({email: e.target.value})}/> <TextField label="Subject" type ="text" onChange = {e => setSubject({subject: e.target.value})}/> <TextField label="Message" type ="text" " onChange ={e => setMessage({message: e.target.value})}/> <Button color="primary" type="button"> Submit </Button> </form>
Проверка ошибок
Я создал переменную состояния массива для сообщений об ошибках, которая была инициализирована как пустой массив, и другую переменную логического состояния, чтобы определить, отображать или скрывать ошибки.
const [errorMessages, setErrorMessages] = useState([]); const [showErrors, setShowErrors] = useState(false);
Я создал функцию formValidation, которая проверяет, были ли поля ввода пустыми или недействительными.
Я создал глобальный массив ошибок, в который можно было вставлять сообщения об ошибках соответствующим образом. В начале метода formValidation я сбрасываю переменную состояния errorMessages в пустой массив, чтобы каждый раз, когда человек отправляет форму, прежние ошибки не сохранялись.
Я использую функцию ValidateEmail (электронная почта) для проверки ввода электронной почты по шаблону регулярного выражения, который я нашел в Интернете.
После проверки правильности операторов ввода мой последний оператор if проверяет, соответствует ли error.length> 0, если это так, я устанавливаю переменные состояния сообщений об ошибках в массив ошибок и устанавливаюShowErrors на true. В противном случае я устанавливаю для ShowErrors значение false и отправляю предупреждающее сообщение «Электронное письмо отправлено!»
let errors = []; //validate email input function ValidateEmail(email) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {return true;} return false; } const formValidation = () => { setErrorMessages([]); const isNameValid = (name !== ""); const isMessageValid = ( message !== ""); const isSubjectValid = (subject !== ""); if (!isNameValid) { errors.push("Name is not valid, please try again."); } if (!ValidateEmail(email)) { errors.push("Email is not valid, please try again."); } if (email === "") { errors.push("Email field is empty, please try again.") } if (!isMessageValid) { errors.push("Message is not valid, please try again."); } if (!isSubjectValid) { errors.push("Subject is not valid, please try again."); } if (errors.length > 0) { setShowErrors({ showErrors: true }); setErrorMessages(errors); } else { setShowErrors({ showErrors: false }); alert("Email Sent"); } };
Затем я передаю метод formValidation кнопке, чтобы проверка выполнялась каждый раз, когда пользователь отправляет форму.
<Button variant="contained" color="primary" type="button" onClick = {formValidation}> Submit </Button>
Я условно визуализирую сообщения об ошибках как элементы ul, отображая через переменную errorMessages над кнопкой в зависимости от того, истинно ли showErrors или нет.
{showErrors ? errorMessages.map((item, index) => { return <ul key={index}>{item}</ul>;}) : null <Button ... </Button>
Это было забавным испытанием для меня, потому что у меня была возможность проверить свои навыки работы с React Hooks. Готовый продукт Вы можете найти здесь:)