Контактная форма – одна из самых важных частей любого веб -сайта… Blah Blah Blah. 🗣 Вы уже знаете это. Вы здесь, потому что вы знаете, насколько важны формы.   И вы хотите создать один, я думаю.

Добро пожаловать, сегодня мы узнаем, как создать форму, используя ReactJS.

Вот что мы будем строить: Реакция форма Анкет

Это просто, не имеет модного пользовательского интерфейса, и это как -то бесполезно.

GitHub Repo: github.com/amineque/react-form

Предварительные условия:

1. Основное знание компонентов бездейства.
2. Основные знания CSS/SASS.

Вот и все. Давайте начнем.

Создайте проект React с помощью NPM или пряжи. Оба работают хорошо.

npx Создать форму-реакционную форму

Нет, я тебя не обманул! NPX такой же, как NPM.

Мы будем использовать SASS в качестве препроцессора. Но я обещаю, что не буду беспокоить тебя каким -либо стилем.

Установить Узел-sass как это:

NPM Установите узлы

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

Удалить это:

App.test.js ReportWebvitals.js setuptests.js

Удалить код по умолчанию и стили из App.js/app.css/index.js/index.css

App.js должен содержать только функцию приложения, которая возвращает пустое div Анкет

Теперь создайте новую папку внутри SRC Папка и дайте ему имя «Компоненты», затем создайте новый компонент и имя его Form.js . Кроме того, создайте таблицу стилей и назовите ее “FormStyle.scss”.

Запустите локальный сервер:

NPM запускается

Я говорил это раньше, в этом нет ничего особенного, но если вы хотите, чтобы я объяснил весь стиль, тогда, пожалуйста, не стесняйтесь оставить комментарий. А пока просто скопируйте стиль из репо Github и поместите его там, где его следует размещать (formtyle.scss) 😎

Следующие письменные учебники по кодированию иногда могут быть сложными Но я помогу вам, так что кодируйте это внутри Form.js составная часть:

import React from 'react'
import './formStyle.scss'

function Form() {
   return(
      

   
 )
}
export default Form

Мы импортировали React, Steelling и создали функцию без сохранения состояния с именем «Форма». Функция возвращает

Внутри контейнера продолжайте и:

Добавить

Создайте элемент формы и дайте ему имя класса «Форма».

Создать div с именем класса «Имя». Это будет служить контейнером для поля имени и фамилии.

Добавить тег с атрибутом для = "FirsrName" Анкет

Проверьте эту цитату о теге:

… Это самый важный элемент, если вы хотите создать доступные формы-при правильном внедрении, читатели Screen Reading будут говорить на этикетке элемента формы вместе с любыми связанными инструкциями, а также будут полезны для видимых пользователей.

Однако всегда помните, чтобы включить атрибут «для».

Теперь добавьте элемент со следующими атрибутами:

type = "text" name = "FirstName" ClassName = "FirstName" tabindex = "1"

Чтобы сделать нашу форму доступной, мы размещаем атрибут «tabindex», чтобы помочь вкладке пользователей через форму с желаемым порядок, а не кодируются элементы заказа по умолчанию.

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

Теперь повторите и создайте другой и элементы для фамилии. Поместите те же атрибуты, но измените слово «первое» с «последним» и дайте TheTabeIndex Атрибут значение «2».

Выводный код:

  
Contact us

 


    


       First name
       
       Last name
       
    
 

Давайте создадим поле ввода электронной почты.

Email

Почти ничего нового, мы добавили с для Атрибут со значением «электронной почты» и строкой «электронной почты». Далее добавьте почти с теми же атрибутами.

Мы дали ввод электронной почты TabeIndex «3», так что это третья поданная вкладка пользователя.

Давайте перейдем к вводу сообщения, который не будет элементом, а. Различия? Это так просто.

Мы используем, когда хотим иметь однострочное текстовое поле, как по имени и по электронной почте. для нескольких линейных текстов. Здесь сообщение может быть одним предложением, абзацем или целым сопроводительным письмом.

Обычно я публикую такие семантические советы и другие трюки по развитию на своем Twitter и Instagram . Я приглашаю вас следовать за мной и заполнить ваш канал полезным контентом.

Теперь добавьте с атрибутом и текстом «Сообщение». Добавить тег с атрибутами: Имя/Classname/Placeholder Анкет

Вывод код:

Message

Давайте добавим кнопку отправки, которая станет вишней на Cack.

Создайте элемент с типом отправки и классной имени «Отправить»:

Send

Убедитесь, что вы все на месте и проверьте, выглядит ли форма в живой версии

Если есть ошибка, вернитесь назад и проверьте выходные коды или обратитесь к коду в репо.

Все хорошо?

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

Давайте сначала поймем, что такое крючок USEREF (). Короче говоря, крючки позволяют использовать функции React без написания класса, а USEREF () – одна из этих функций.

Хорошо! А что делает эта особенность USEREF ()?

Ссылки предоставляют способ получить доступ к узлам DOM или реагировать элементы, созданные в методе рендеринга.

USEREF () может быть заменой USESTATE (). Он ведет себя точно так же, как usEState (), за исключением того, что последнее запускает повторный рендеринг, а USEREF ()-нет.

USEREF возвращает объект со свойством, называемым током, и относится к текущему узлу или элементу, направленному на крючок. Вы поймете это через несколько секунд.

Чтобы работать с USEREF () Хук, сначала нам нужно импортировать его, как то, как мы импортируем использование и другие крючки.

Импорт React, {useref} из ‘React’

Вот синтаксис:

const (initialValue)

Давайте внедрим это в нашу форму.

Создайте следующие переменные внутри компонента формы, но, конечно, не внутри JSX.

Каждый вход должен иметь свою собственную переменную.

const firstNameRef = useRef(null)
const lastNameRef =  useRef(null)
const emailRef = useRef(null)
const messageRef =  useRef(null)

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

Теперь нам нужно вернуться к входу формы и добавить ref = {} атрибут.

На каждом входе в форму добавьте атрибут Ref с соответствующей переменной.

Например, поле, ответственное за FirstName, может иметь следующий атрибут ref = {firstnameref}

Это подключит переменную USEREF с правильным элементом. Возьми?

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

Кодировать это внутри Форма Компонент и прямо под четырьмя переменными, которые мы создали ранее:

const handleSubmit = (event) => {
      event.preventDefault()

      const data = {
            firstName: firstNameRef.current.value,
            lastName: lastNameRef.current.value,
            email: emailRef.current.value,
            message: messageRef.current.value
            }
      alert("tadaaa!: \n" + JSON.stringify(data) + "Your data 😎")
}

Функция имеет событие как аргумент. Мы используем «событие» с известным методом «предотвратить», чтобы помешать браузеру выполнить поведение целевого элемента по умолчанию, в нашем случае это освежает страницу.

Затем мы создали объект с четырьмя свойствами, каждое свойство содержит ссылку на текущее значение целевого элемента.

Например, в приведенном выше коде мы поместили ref = {firstnameref} Внутри ввода имени мы обратились к нему в данные объекта:

FirstName: Firstnameref.current.value

Для объема этой статьи мы только предупреждаем данные обратно пользователю. 🤷 ‍♂ ️

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

Если вы чувствуете, что узнали что -то новое, поделитесь этой статьей, кто -то где -то ищет ее. Они будут ценить вас и считать вас их экономией.

Увидимся.

Оригинал: “https://dev.to/amiinequ/how-to-create-a-contact-form-in-react-js-for-beginners-3571”