При создании SPA для выгула собак с помощью JavaScript я столкнулся с необходимостью создать раскрывающееся меню, чтобы выбрать, для какой собаки предназначен запрос на прогулку. Поскольку у владельцев может быть более одной собаки, мне нужен был способ динамически создать это, используя массив собак владельца. После поиска решения в Интернете я решил разместить свои выводы здесь в надежде, что это поможет следующему программисту!
Мнение: мне лично нравится, чтобы верхний параметр был пустым, чтобы при загрузке формы не было предварительно создано одно из значений.
Теперь, как бы я сгенерировал теги параметров, если бы у меня был массив информации? Ниже я хотел, чтобы показанный текст был именем собаки, а значение — идентификатором собаки, чтобы он был связан с экземпляром этой собаки после его сохранения в базе данных. Мой массив содержит экземпляры каждой собаки, которая есть у владельца, поэтому я могу получить доступ к имени и идентификатору этой собаки.
Чтобы динамически создать параметр для каждой собаки, я сопоставил массив собак и вернул тег параметра, который содержал идентификатор собаки, а также ее имя.
Если вы внимательно посмотрите выше, наряду с генерируемыми тегами параметров, вы заметите событие handleChange. Я использую это, чтобы отслеживать свое состояние каждый раз, когда пользователь изменяет какой-либо ввод в форме.
Для каждого выбора в форме я устанавливаю свойство имени и значения для каждого раздела формы (например, дата встречи, время, адрес, собака и т. д.). Вместо того, чтобы вызывать каждый из них вручную, я создал абстрактную функцию handleChange, в которой задал пары ключ-значение для локальных состояний. Это и чисто, и просто — мой любимый вид кода, когда это возможно!
Я надеюсь, что это было полезно, и я обязательно буду ссылаться на этот пост в будущем в следующий раз, когда мне нужно будет создать динамическое раскрывающееся меню. Пожалуйста, не стесняйтесь задавать любые вопросы!
Будьте здоровы и продолжайте кодировать.
