Создание управляемого ввода
У вашего приложения может быть более сложное взаимодействие между state и отображаемым пользовательским интерфейсом. Например, элементы управления формой для ввода текста, такие как input и textarea сохраняют свое собственное состояние в DOM по типу пользователя. С React, вы можете переместить это изменяемое состояние в компонент. Ввод пользователя становится частью приложения state, так что React контролирует значение этого поля ввода. Как правило, если у вас есть компоненты React с полями ввода, которые пользователь может ввести, это будет управляемая форма ввода.
Редактор кода имеет скелет компонента, называемого ControlledInput для создания управляемого элемента input. state компонента уже инициализирован со свойством input, который содержит пустую строку. Это значение представляет собой текст, который пользователь вводит в поле input . Сначала в классе компонента создайте метод handleChange() который имеет параметр, называемый event . Когда метод вызывается, он получает объект event который содержит строку текста из input элемента. Вы можете получить доступ к этой строке с помощью event.target.value внутри метода. Обновите состояние компонента со значением этой новой строки. В методе рендеринга создайте элемент input над тегом h4 . Добавьте ему атрибут value и в качестве его значения передайте значение input из состояния компонента. Затем добавьте метод handleChange() компонента в качестве обработчика на событие onChange(). Когда вы вводите текст в поле ввода, этот текст обрабатывается методом handleChange() , устанавливается как свойство input в локальном state и отображается как значение в поле input на странице. Состояние компонента является единственным источником данных для поля ввода. И последнее, но не менее важное: не забудьте добавить необходимые привязки в конструктор.
Примечание: Здесь важно понимать, что event.target.value - это не единое строчное имя конечного свойства, содержащего текстовое значение поля ввода, а путь к конечному свойству с использованием точечной нотации. То есть конечная строка содержится в свойстве value, которое является свойством объекта target, которое, в свою очередь, является свойством объекта event. То есть в обработчике на изменение вы можете получить очень-очень много всякой информации, а не только текстовое значение поля.
И еще момент: хотя у нас обработчик на изменение навешен на HTML-элемент, в наш метод прилетает не чистый объект HTMLElement: change event, а реактовая обертка SyntheticEvent. Это важно учитывать и понимать, если вы хотите более глубоко копнуть эти объекты.
И здесь еще один важный момент: Не забываем, что мы передаем наш обработчик не напрямую в DOM, а через реакт, а тот сильно меняет логику, хоть это и не очевидно. В итоге, у нас не одно событие навешено на сам input, а сразу несколько событий на сам объект window.document. Просто помните об этом на тот случай, если у вас возникнут более хитрые задачи вокруг событий.