На прошлой неделе я работал над реализацией контактной формы с помощью 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. Готовый продукт Вы можете найти здесь:)