Обработка форм в React

Так что пристегнитесь и приготовьтесь к некоторому развлечению с формулярами (да, это то, что нужно)! 😂

Введение в формы

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

<form>
  <label for="f-name">First name:</label>
  <input type="text" id="f-name" name="f-name">
  <label for="l-name">Last name:</label>  
  <input type="text" id="l-name" name="l-name">
</form>

Необходимость в обработке форм?

В HTML, когда мы отправляем форму, вы заметите, что страница обновляется сама по себе.

Однако, поскольку React хранит данные формы в состоянии. Если мы не будем обрабатывать формы в React, форма будет вести себя по умолчанию (т. е. она обновится сама и текущее состояние будет потеряно). Это означает, что при отправке формы данные, введенные пользователем в форму, будут потеряны навсегда.

Обработка форм в React

Теперь, когда мы знаем, почему обработка форм так важна, давайте приступим к тому, как с ними обращаться. В React мы можем обрабатывать форму двумя способами:

• Управляемые компоненты
• Неконтролируемые компоненты

Давайте посмотрим, чем они отличаются друг от друга и как они работают.

Управляемые компоненты

Форма, данными которой управляют таким образом, что ее данные хранятся в состоянии React с помощью useState() и обновляется с помощью функции setState(), которая может быть запущена только пользователем. Чтобы создать ваш собственный управляемый компонент, нам нужно использовать свойства value и onChange элемента form.

Например:

import { useState } from "react";
const Form=()=>{
  // To store data in state
  const [data,setData]=useState("") // If you provide a value to the component, it must remain a string throughout its lifetime.

  //To handle Submit
  const handleSubmit=(event)=>{
    event.preventDefault() //Prevents the default behaviour
    alert('You have entered the name: '+ data)
  }

  //To handle change of the input
  const handleChange=(event)=>{
    setData(event.target.value)
    event.preventDefault()  //Prevents the default behaviour
  }
  return(
    <form onSubmit={handleSubmit}>
      <label>
          Name:
          <input type="text" value={data} onChange={handleChange} />
        </label>
        <input type="submit" value="Submit" />
    </form>
  )
}
export default Form;

Обработка нескольких входных данных

Чтобы обрабатывать несколько входных данных, вы можете использовать атрибут name элемента ввода для доступа к нему и позволить функции-обработчику выбирать, что с ним делать.

Примечание: Для флажков используйте event.target.checked вместо event.target.value.

Пример:

import { useState } from "react";

const Form=()=>{
  const [state,setState]=useState({isGoing: true,numberOfGuests: 2})

  const handleInputChange=(event)=>{
    event.preventDefault();
    const target=event.target
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setState((prevState)=>{
      return {...prevState,[name]:value}
    })
    console.log(state)
  }

  return(
    <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={state.isGoing}
            onChange={handleInputChange} 
            />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={state.numberOfGuests}
            onChange={handleInputChange}
             />
        </label>
      </form>
  )
}
export default Form;

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

Неконтролируемые компоненты

Даже если вам удастся создать форму, которая может обрабатывать несколько входных данных, это все равно не решит проблемы с производительностью, поскольку компонент будет повторно отображаться после каждого обновления состояния. Следовательно, вы можете использовать неконтролируемые компоненты, которые используют useRef() для получения f значения orm из DOM (объектной модели документа).

Пример:

import { createRef } from "react"

const Form=()=>{
  const input=createRef()

  const handleSubmit=(event)=>{
    event.preventDefault()
    alert('A name was submitted: ' + input.current.value);
  }
  return(
    <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" ref={input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
  )
}
export default Form

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

Вывод

Вы можете перейти ко всей песочнице, которую я внедрил, и попытаться понять код более эффективно. Кроме того, я предлагаю ознакомиться с некоторыми официальными документами по Re действие. Прощайте, мои храбрые хоббиты.