React Js: как я могу использовать номер индекса для отключения кнопки (если индекс = 4, то отключите кнопку)

введите описание изображения здесь мне нужно создать компонент, в котором один человек может добавить до 4 адресов, для этого я использовал срез (0,4) в функции карты, но я должен отключить кнопку при вводе 4 адресов

Как я могу это сделать, мне нужно решение

введите описание изображения здесь

Добро пожаловать в СО. Вам может быть полезно прочитать сайт раздел помощи, когда речь идет о задать хороший вопрос и этом контрольный список вопросов. Код, над которым вы работали для решения проблемы, должен включать минимальный воспроизводимый пример и быть включенным в ваш вопрос. Вот некоторая документация о том, как создать фрагмент React..

Andy 10.04.2022 20:12

Не используйте индексы. Ваши кнопки — это «вещи», они существуют по какой-то причине, поэтому обновите свое состояние на основе пользовательского ввода, а затем просто убедитесь, что новый виртуальный дом отображается так, как должно выглядеть дерево (конечно, с атрибутами key, поэтому что React может делать все, «какие биты оставить, какие выбросить, какие биты изменить на месте»). Вы отвечаете за то, как все должно выглядеть, а React отвечает за соответствующее обновление пользовательского интерфейса. Не пытайтесь выполнять работу React в своем собственном коде =)

Mike 'Pomax' Kamermans 10.04.2022 21:05
Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
2
2
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вы ищете что-то подобное в своем операторе возврата:

        <Button
          className="btn-info btn-sm"
          type="button"
          onClick={(e) => clicked(e)}
          disabled={locations.length >= 4}
        >
          Add Address
        </Button>

Я думаю, вы хотите использовать map.size() для количества адресов в условном отключении вместо индекса.

Обратите внимание, что я использовал компоненты Начальная загрузка, поэтому кнопка представляет собой раскрывающийся виджет. Если вы не используете библиотеку виджетов пользовательского интерфейса, вам следует подумать об этом, чтобы упростить задачу.

я прикрепил то, что мне нужно сделать, это все, что мне нужно сделать в функции карты {locations.slice(0, 4).map((location, index) => (используйте это значение индекса для переключения состояния кнопок таким образом, что если index= == 4, затем кнопка отключена, если включено менее 4 кнопок

Shreyash Giri 10.04.2022 20:18

или как я могу экспортировать номер индекса из функции карты

Shreyash Giri 10.04.2022 20:20

я совсем запутался, есть ли способ, которым мы могли бы общаться устно, мне действительно нужна помощь

Shreyash Giri 10.04.2022 20:26

Я редактировал свой ответ несколько раз. Пожалуйста, посмотрите на это еще раз и объясните, в какой части вы запутались. Я не думаю, что вы хотите использовать индекс последнего местоположения, размер местоположения гораздо проще получить доступ за пределами функции карты. Является ли переменная местоположения массивом?

Cheshiremoe 10.04.2022 20:41

да это массив

Shreyash Giri 10.04.2022 20:43

тогда вы можете просто использовать location.length, чтобы получить количество элементов в массиве.

Cheshiremoe 10.04.2022 21:01
Ответ принят как подходящий

if(locations.length < 4) { <button type="button"> Add </button> } Таким образом, в основном кнопка будет появляться или исчезать в зависимости от того, истинно или ложно условие.

спасибо за это, но что, если кнопка находится за пределами функции карты, можно ли экспортировать номер индекса из функции карты ??

Shreyash Giri 10.04.2022 20:22

Вы заполняете массив адресов?

Marin Filipov 10.04.2022 20:24

я совсем запутался, есть ли способ, которым мы могли бы общаться устно, мне действительно нужна помощь

Shreyash Giri 10.04.2022 20:26

Я не могу прямо сейчас, но если вы дадите более подробную информацию о том, как вы хотите, чтобы ваш компонент работал, возможно, я смогу вам помочь. Итак, первый вопрос: хотите ли вы отправить все четыре адреса сразу или по одному?

Marin Filipov 10.04.2022 20:28

позвольте мне рассказать сценарий, мне нужно создать страницу, на которой человек может добавить 4 адреса, и после добавления четвертого адреса ввод и кнопки должны быть скрыты, когда пользователь удаляет один адрес из четырех добавленных, затем снова появляется ввод и кнопка

Shreyash Giri 10.04.2022 20:28

пожалуйста, направьте меня к лучшей практике для этого

Shreyash Giri 10.04.2022 20:29

Таким образом, вы можете использовать длину массива адресов в качестве условия вместо индекса. Таким образом, вы можете проверить, сколько адресов уже сохранено.

Marin Filipov 10.04.2022 20:30

подождите, я добавляю изображения пользовательского интерфейса, это было бы более понятно

Shreyash Giri 10.04.2022 20:30

Вы можете просмотреть изображения пользовательского интерфейса и кода, чтобы понять, что я пытаюсь сделать.

Shreyash Giri 10.04.2022 20:34

Таким образом, вам просто нужно обернуть свои входы и кнопки, которые вы хотите скрыть, в операторе if, где вы проверяете «locations.length < 4», поэтому, если он меньше 4, они появятся, но если он равен или больше 4, они исчезнет.

Marin Filipov 10.04.2022 20:40

да это так, но дело в кнопке и ввод лежит вне функции карты

Shreyash Giri 10.04.2022 20:41

Функция карты используется только для отображения всех адресов в массиве. Вам это не нужно для оператора if. Длина массива должна динамически изменяться при добавлении или удалении адреса.

Marin Filipov 10.04.2022 20:44

так что я могу показать кнопки скрытия через длину местоположения (массива), это правильно ??

Shreyash Giri 10.04.2022 20:45

независимо от функции карты

Shreyash Giri 10.04.2022 20:45

Да, просто попробуйте это с простым оператором if и прокомментируйте, если это сработало.

Marin Filipov 10.04.2022 20:46

о боже, какой я дурак, большое спасибо, Марин, я только что делал это с 13 часов, это сработало !!! Спасибо большое.

Shreyash Giri 10.04.2022 20:49

Добро пожаловать! Буду признателен, если вы проголосуете за мой комментарий. Удачи в том, что вы делаете!

Marin Filipov 10.04.2022 20:50

Я бы хотел, но моей репутации недостаточно, чтобы сделать это, пожалуйста, не могли бы вы оставить свой адрес электронной почты, чтобы мы могли связаться

Shreyash Giri 10.04.2022 20:51

Другие вопросы по теме