React — Формы

В React формы могут и обычно управляются с помощью состояний, это дает большую власть над обработкой событий (onChange, onSubmit) и контроль над их значениями, поскольку React становится единственным «источником истины», формы, которые управляются с помощью состояний в React, называются (управляемый компонент).

Рассмотрим несколько примеров контролируемых форм

Вход

import React, { useState } from "react";

export const Form = () => {
  const [name, setName] = useState("");

  function onSubmit(event) {
    event.preventDefault();

    console.log(name)
  }

  return (
    <form onSubmit={onSubmit}>
      <label>
        Name:
        <input
          type="text"
          onChange={(event) => setName(event.target.value)}
          value={name}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
};
Войдите в полноэкранный режим Выход из полноэкранного режима
  • 1 — Мы создаем состояние для хранения и обновления имени.
  • 2 — Мы управляем входом, устанавливая его значение с помощью имени state.
  • 3 — В onChange мы обновляем значение через функцию setName.
  • 4 — В onSubmit у нас есть доступ к состоянию имени для манипуляций.

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

Далее мы рассмотрим основные элементы формы и то, как манипулировать ими с помощью react.

Выберите

В React вместо использования атрибута selected для определения выбранного значения мы используем атрибут value в корне тега select. Это удобнее в управляемом компоненте, поскольку обновлять его нужно только в одном месте.

  <select value={language} onChange={(e) => setLanguage(e.target.value)}>
    <option value="javascript">Javascript</option>
    <option value="c#">C#</option>
    <option value="python">Python</option>
  </select>
Войдите в полноэкранный режим Выход из полноэкранного режима

Вы можете передать массив в атрибут value, что позволит вам выбрать несколько вариантов в теге select:

<select multiple={true} value={['B', 'C']}>
Войдите в полноэкранный режим Выход из полноэкранного режима

Флажок

Элемент checkbox может управлять своим состоянием с помощью атрибута checked, задавая условие, которое возвращает булеву величину, основанную на состоянии. Это может быть простая булева величина или более сложное условие, когда есть несколько вариантов выбора.

<input
  type="checkbox"
  checked={checkedBoolean}
  onChange={() => setCheckedBoolean(!checkedBoolean)}
/>
checkbox
Войдите в полноэкранный режим Выход из полноэкранного режима

Радио

Поскольку радиоэлемент является единственным выбором, мы можем сравнить атрибут checked с текущим состоянием.

<label>
  <input
    type="radio"
    name="gender"
    value="masculino"
    checked={gender === "masculino"}
    onChange={({ target }) => setGender(target.value)}
  />
  Masculino
</label>

<label>
  <input
    type="radio"
    name="gender"
    value="feminino"
    checked={gender === "feminino"}
    onChange={({ target }) => setGender(target.value)}
  />
  Feminino
</label>
Войдите в полноэкранный режим Выход из полноэкранного режима

Ввод файла

В HTML <input type="file"> позволяет пользователю выбрать один или несколько файлов со своего устройства для отправки на сервер.
Поскольку его значение доступно только для чтения, он является неконтролируемым компонентом React.

Вы можете создать состояние для хранения объекта File или массива, в зависимости от необходимости, и использовать это состояние в некоторой логике в интерфейсе и отправке на сервер.

Textarea

Textarea в react имеет атрибут value для манипулирования им, что делает его очень похожим на элемент input.

<textarea 
  value={description} 
  onChange={(e) => setDescription(e.target.value)} 
/>
Войдите в полноэкранный режим Выход из полноэкранного режима

Манипулирование несколькими входами

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

Пример

function handleInputChange(event) {
  const { target } = event;
  const { type, name, value } = target;

  if (type === "checkbox") {
    const drinks = formData.drinks || [];

    if (target.checked) {
      const drinksUpdated = [...drinks, value];

      setFormData({ ...formData, [name]: drinksUpdated });
      return;
    }

    const drinksUpdated = drinks.filter((drink) => drink !== value);

    setFormData({ ...formData, [name]: drinksUpdated });
    return;
  }

  setFormData({
    ...formData,
    [name]: value,
  });
}
Войдите в полноэкранный режим Выход из полноэкранного режима

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

Обычно мы используем библиотеки для работы с формами и валидации в React, такие как formik, react-hooks-form, Yup и другие.

Ну вот и все на сегодня, у нас есть введение в React forms, чтобы начать создавать наши приложения.

Спасибо за чтение.


Официальная документация — Формы

См. также: Изучение React — дорожная карта!

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

Следуйте за мной 🙂

Github | Linkedin

Оцените статью
Procodings.ru
Добавить комментарий