Программа нуждается в дополнительной логике. Например, после нажатия кнопки «Редактировать» введенный текст не сохраняется. Разделим процесс на два этапа:
- Ввод и сохранение текста в переменную.
- Вставка текста из переменной в текстовое поле.
В этом уроке реализуем первый этап – сохранение введенного текста.
Неподходящие ID и обращение по индексу
Использование id текстового поля невозможно, так как создаётся несколько компонентов с одинаковым id, а id должен быть уникальным на странице.
Обращение к текстовому полю по индексу (this.refs.text[index]) также неэффективно, поскольку React не сможет однозначно определить целевое поле из-за множественности текстовых полей.
Использование атрибутов refs
В React существуют атрибуты refs (references) – ссылки на объекты. Используем их для решения задачи.
В textarea добавим атрибут ref, например, ref={this.newTxt}. Значение newTxt может быть любым.
Получение значения из текстового поля
В функции save создадим переменную value, в которую поместим значение из текстового поля:
const value = this.refs.newTxt.value;Теперь value содержит введенный текст. Для демонстрации выведем его с помощью alert:
alert(value);Обновим страницу, нажмем «Редактировать», введем текст (например, «itproger») и нажмем «Сохранить». alert выведет введенный текст.
В этом уроке показано использование атрибутов refs для работы с текстовыми полями. Они позволяют корректно получать значения из элементов, в отличие от использования id или обращения по индексу. В следующих уроках продолжим работу, используя полученные данные для заполнения текстового поля.