Определение
Контролируемый компонент — это React-компонент, который управляет элементами формы, контролируя их состояние через состояние React и обработчики событий. Это значит, что состояние компонента — это единственный источник истины для значения инпута.
Ключевые характеристики
- Каждый ввод пользователя запускает связанную функцию-обработчик
- Компонент явно обновляет состояние в ответ на изменения пользователя
- Состояние React всегда отражает текущее значение инпута
- Элементы формы перерисовываются на основе обновлений состояния
Пример реализации
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()})
}
В этом примере:
- Обработчик
handleChange захватывает ввод пользователя из события
setState() обновляет состояние компонента новым значением- Инпут автоматически преобразуется в верхний регистр
- Компонент перерисовывается с обновлённым значением
Зачем использовать контролируемые компоненты
- Предсказуемое поведение: состояние всегда синхронизировано со значениями инпутов
- Валидация в реальном времени: ты можешь валидировать или трансформировать ввод сразу же
- Динамическая обработка инпутов: легко реализовать такие фичи как ограничение символов или требования к формату
- Интеграция с формами: упрощает отправку формы и управление данными
Практические примеры использования
Контролируемые компоненты идеальны для ситуаций, где тебе нужно:
- Валидировать ввод перед отправкой
- Трансформировать ввод пользователя (например, в верхний регистр, форматирование)
- Отключать отправку формы на основе валидности ввода
- Заполнять форму существующими данными