Как выглядит контролируемый input в React?

Что такое контролируемый input?

Контролируемый input — это элемент формы, значение которого управляется состоянием React-компонента. Вместо того чтобы полагаться на внутреннее состояние DOM, React берет на себя управление значением поля ввода через свойство value и обработчик onChange. Это делает поведение формы предсказуемым и легко тестируемым.

Как это работает?

При каждом изменении текста в input вызывается функция onChange, которая обновляет состояние компонента. Затем React перерисовывает компонент, и input получает новое значение из состояния. Таким образом, источником истины является React state, а не DOM.

Пример кода

import React, { useState } from 'react';

function ControlledInput() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
    />
  );
}

Где применяется?

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

Вывод

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