Динамический ввод в React
Я создаю приложение React, и на одном из экранов есть форма, в которой пользователи могут заполнять переменное количество полей ввода. На этом экране изначально нет входных данных, и пользователи вводят дополнительные входные данные, нажимая кнопку «добавить поле». Назовем эту функцию «Динамические входы».
В этом посте я опишу различные способы реализации динамических входов.
Первое, что я попробовал, — перевести Inputs в состояние при нажатии кнопки:
На более позднем этапе я зациклился на состоянии и передал реквизиты во входы. В качестве альтернативы я попытался добавить входы с уже указанными реквизитами:
Такой подход работает, но неудобен, потому что приходилось конвертировать в текстовый объект, а потом обратно конвертировать в нетекстовые объекты и еще куча заморочек. Это был неправильный путь, поэтому я искал лучший подход.
Оказывается, вы можете использовать функцию массива и карты для реализации динамических входов. В этом случае даже не имеет значения, что находится внутри массива. Важно только общее количество элементов массива.
Итак, я создал пустой массив с именем controls и поместил его в состояние. Первоначально это соответствует нулевым входам на экране:
После этого все, что мне нужно было сделать, это добавить новые элементы в элементы управления. Даже пустые строки будут работать. Это может быть самая простая реализация обработчика нажатия кнопки:
В качестве альтернативы вы можете использовать ту же функцию, но с оператором спреда:
Теперь вы просто перебираете этот массив в части рендеринга и используете его как счетчик. Результат вы сохраняете в переменную, а затем отображаете его в возвращаемой части.
При добавлении каждого нового элемента React перерисовывает компонент, функция map проходит через массив элементов управления, и количество входных данных на экране изменяется.
Теперь, если есть вход, вы обычно хотите получить его значение. Итак, нам нужна функция для обработки входных данных.
Или вы также можете использовать функцию ObjectAssign() для достижения того же эффекта:
Входные данные, передаваемые этой функции, представляют собой объект событие, обладающий всеми свойствами измененных входных данных. Значение этого ввода хранится в ключе event.targer.value. Просто для ясности: в React вы не просто заполняете входные данные и запрашиваете их значения при отправке формы, нет. Вместо этого при каждом изменении ввода вы сохраняете результат в состоянии и получаете его оттуда позже.
Чтобы связать все это вместе, я поместил следующий код в функцию Render:
Объединив эту функцию Render с функциями onAddInput и inputChangedHadler, определенными ранее, вы получите значения настраиваемого количества входных данных в массиве state.controls. Теперь вы можете запросить этот массив для ввода данных пользователем, чтобы реализовать свои собственные требования.
Итак, вот как я реализовал простые динамические вводы в React.
