Выбор повторяющихся значений в раскрывающемся компоненте
вступление
В этом блоге мы создадим компонент React, позволяющий пользователям выбирать значения из раскрывающегося списка, а затем решать ситуацию, когда значения идентичны. Для простоты блога набор данных жестко закодирован в компоненте, но в вашем случае вы можете получить эти данные из API или получить их в качестве реквизита.
Мотивация
Наше SPA позволяло пользователям копировать контент между разными группами и подгруппами, однако, если подгруппа имеет один и тот же заголовок контента, то в раскрывающемся списке по умолчанию всегда используется первое значение из списка. Это помешало пользователям копировать второй контент. Возможные решения были:
- Не позволяйте пользователям создавать контент с одинаковым заголовком
- Больше не отображать повторяющиеся заголовки контента
- Разрешить пользователям без проблем выбирать контент с одинаковым заголовком
Данные
Дизайн
Код
Во-первых, мы сосредоточимся на создании компонентов, отвечающих за перечисление данных и позволяющих пользователям выбирать интересующие их значения. В следующем разделе мы изменим тот же компонент для обработки повторяющихся значений.
Не стесняйтесь заменить код code-sandbox на приведенный выше код, чтобы воспроизвести проблему. Если вы это сделаете, мы увидим, что пользователь не может выбрать второе повторяющееся значение (например, математические задачи).
Обновленный код для обработки повторяющихся значений:
Вот полный пример в codesandbox.
Бонус: мы могли бы сделать дополнительный шаг и выделить логику выпадающего списка в отдельный компонент, чтобы его можно было опубликовать в библиотеке повторно используемых компонентов.
Три моих предыдущих блога:
1. React: SPA с маршрутизацией на основе пути в облаке AWS
2. React: Дизайн поискового компонента
3. Реагировать | Node: Почему мы должны заботиться о зависимостях?
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.
