В React существует два основных подхода к обработке входных данных формы:

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

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

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

Это входные данные формы, значения которых контролируются состоянием React. Переменные состояния обновляются всякий раз, когда изменяется значение входных данных, а значение входных данных задается явно через свойство value.

Обработчик событий onChange используется для обновления состояния.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          
     );
}

В приведенном выше примере переменная состояния name управляет значением поля ввода. Функция handleChange обновляет состояние имени всякий раз, когда изменяется входное значение и для входного значения устанавливается текущее значение переменной состояния имени через свойство value.

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

Неконтролируемые компоненты — это входные данные формы, которые управляют своим состоянием внутри себя, а не контролируются React State. Вы можете получить доступ к текущему значению ввода, используя ref после отправки формы или при необходимости.

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          

В приведенном выше примере inputRef используется для создания ref для поля input. Функция handleSubmit получает доступ к текущему значению ввода, используя inputRef.current.value. Логика отправки формы может быть реализована для использования входного значения по мере необходимости.