Устраняем warning в React: смена uncontrolled на controlled input

Быстрый ответ

То, чтобы преобразовать неуправляемое поле ввода в управляемое, нужно связать значение этого поля с состоянием React через value и актуализировать его с помощью события onChange.

import React, { useState } from 'react';

function TextInput() {
  const [inputValue, setInputValue] = useState('');

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
}

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

Зачем, когда и как использовать управляемое поле ввода

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

К их преимуществам относятся:

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

Следует инициализировать своё состояние определённым значением, используя классы или хуки, как, например, useState, чтобы избежать проблем с неуправляемыми полями ввода.

Правила изменения состояния

Инициализация состояния: делайте это правильно

Сразу инициализируйте своё состояние, чтобы минимизировать проблемы при взаимодействии управляемых и неуправляемых компонентов.

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Джон Доу' };
  }
  // ...
}

Переход от неуправляемого к управляемому

Стремитесь исключить значения null или undefined, чтобы предотвратить превращение поля ввода в неуправляемое.

Обработчики ввода: подстраховка управления

Добавьте к полям ввода обработчики onChange, чтобы управлять потоком данных в нужное состояние.

handleChange(event) {
  this.setState({value: event.target.value});
}

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

Привязка событий: всё вращается вокруг "this"

Гарантируйте, что обработчики событий используют правильный контекст this.

Через привязку:

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

Или при помощи стрелочной функции:

handleChange = (event) => {
  this.setState({value: event.target.value});
}

Чекбоксы и !!: содружество функций

При работе со переключателями используйте оператор !!.

<input
  type="checkbox"
  checked={!!this.state.isTicked}
  onChange={this.handleCheckboxChange}
/>

Визуализация

Неуправляемое поле ввода в React ведёт себя подобно птице, которая летит свободно.

Преобразование его в управляемое поле ввода – это как если бы птицу привязали к виртуальному поводку.

Неуправляемое: 🐦
Управляемое:     🐦➡️🔗➡️💡

Поводок (свойство value) связан с лампочкой (состоянием React), что позволяет направлять «полет» птицы с помощью обработчика onChange.

Преодолеваем подводные камни

Неопределенные значения: Как Бермудский треугольник

Проверьте, что поля ввода не содержат неопределённых значений. Используйте только конкретные значения для свойства value.

Массивы и объекты: поддерживаем порядок

Когда работаете с массивами или объектами в состоянии, не меняйте их напрямую. Используйте только методы для неизменяемого обновления состояния.

handleArrayChange = (index, newValue) => {
  const newArray = [...this.state.array];
  newArray[index] = newValue;
  this.setState({ array: newArray });
};

Распространенные ошибки, которых следует избегать

Нужно избежать:

• Нескольких default exports в одном модуле.
• Отсутствия обработчика onChange.
• Пропуска свойства prop.

Полезные материалы

1. Неконтролируемые компоненты – React: В документации React детально описаны неконтролируемые формы.
2. Формы – React: Это руководство поможет в обработке нескольких полей формы в React.
3. Что такое управляемые компоненты в React: В данной статье подробно рассказывается о концепции и преимуществах управляемых компонентов.
4. Использование хука состояния – React: Туториал по использованию хука useState.
5. Refs и DOM – React: Данный материал будет полезен, если вам требуется прямой доступ к DOM.
6. Использование эффекта хука – React: Обзор использования хука useEffect для создания побочных эффектов в функциональных компонентах.