Прошло пару недель с тех пор, как я начал изучать React в школе Flatiron. Это сильно отличалось от всего, что я узнал раньше, но, наконец, это начало обретать смысл, как только я намочил руки, создав свой собственный журнал питания и приложение для отслеживания калорий. Потребовалось много передачи реквизита вверх и вниз по цепочке, чтобы выполнить функциональность, которую я планировал. Это была отличная практика, чтобы понять, как работает React, включая жизненный цикл компонентов и единый источник правды.
Одна из функций моего приложения требовала от меня ввода формы для отображения и хранения статистики пользователей, такой как имя, возраст, необходимые калории, вес и рост. Эта ошибка появилась в моей консоли, и, честно говоря, я не был уверен, что она означает, поэтому решил копнуть глубже, чтобы понять разницу между неконтролируемым и контролируемым вводом формы.
Неконтролируемые входы
Неконтролируемый ввод запоминает то, что вы набрали. Например, вы можете получить их значение с помощью обработчика onClick для кнопки. Другими словами, вы должны извлекать значение из поля ввода, когда вам это нужно. С неконтролируемыми полями ввода вы не можете обновить или изменить состояние. Другими словами, что вы отправляете, то и получаете.
Управляемые входы
С контролируемым вводом формы всегда происходят какие-то изменения. Кроме того, управляемый вход принимает свое текущее значение в качестве реквизита. Существует также функция обратного вызова, необходимая для обработки изменений, происходящих с полем ввода.
Как вы можете видеть на следующем изображении, при заполнении формы onChange обрабатывает поле ввода и обновляет состояние этого компонента.
Итак, когда мы должны использовать контролируемый против неконтролируемого?
Неконтролируемые входные значения могут использоваться для самых простых форм. Недостатком этого типа значений является то, что функциональность ограничена, и вы мало что можете с этим сделать.
С другой стороны, в контролируемыхвходныхзначениях ваше состояние и входные данные всегда синхронизированы. Это означает, что компонент формы может немедленно реагировать на ввод пользователя. Возможность сделать это может предоставить нам большие возможности для реализации проверки обратной связи на месте, отключения кнопки, если все поля не содержат достоверных данных, и принудительного ввода определенного типа ввода, такого как номера кредитных карт.
Если вы считаете, что вам нужны упомянутые функции в вашем приложении, рекомендуется использовать контролируемые входные значения; однако, если вы планируете иметь базовую форму, то неконтролируемые входные значения могут быть проще и менее затратны по времени для реализации.
