Как сделать input управляемым?

Управляемый Input в React

Управляемый (controlled) input - это элемент форы, значение которого контролируется состоянием React компонента. Это означает, что React становится "источником истины" для значения input.

Основной принцип

Управляемый input имеет две основные характеристики:

1. Значение input привязано к состоянию компонента через свойство value
2. Изменение input обновляет состояние через обработчик события onChange

import { useState } from "react";

export function ControlledInput() {
  const [value, setValue] = useState("");

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

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder="Введите текст"
    />
  );
}

Цикл синхронизации

Когда пользователь вводит текст:

1. Срабатывает событие onChange
2. Вызывается обработчик handleChange
3. Обновляется состояние value
4. Компонент перерендеривается
5. Input получает новое значение из value

Преимущества управляемых inputs

Валидация в реальном времени:

const [email, setEmail] = useState("");
const isValid = email.includes("@");

return (
  <input
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    style={{ borderColor: isValid ? "green" : "red" }}
  />
);

Условное отключение отправки:

const [password, setPassword] = useState("");
const canSubmit = password.length >= 8;

return (
  <>
    <input
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
    />
    <button disabled={!canSubmit}>Отправить</button>
  </>
);

Сравнение с неуправляемым input

Неуправляемый input использует DOM напрямую (через useRef):

const inputRef = useRef(null);

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

return (
  <>
    <input ref={inputRef} />
    <button onClick={handleSubmit}>Отправить</button>
  </>
);

Управляемый input предпочтителен в большинстве случаев, так как позволяет React контролировать весь процесс.

Оптимизация производительности

Для сложных форм используй useCallback для стабильности обработчика:

const handleChange = useCallback((e) => {
  setValue(e.target.value);
}, []);

Управляемые inputs - это основа реактивных форм в React и обязательный паттерн для любого фронтенд-разработчика.