React Js: как я могу использовать номер индекса для отключения кнопки (если индекс = 4, то отключите кнопку)
введите описание изображения здесь мне нужно создать компонент, в котором один человек может добавить до 4 адресов, для этого я использовал срез (0,4) в функции карты, но я должен отключить кнопку при вводе 4 адресов
Как я могу это сделать, мне нужно решение
Не используйте индексы. Ваши кнопки — это «вещи», они существуют по какой-то причине, поэтому обновите свое состояние на основе пользовательского ввода, а затем просто убедитесь, что новый виртуальный дом отображается так, как должно выглядеть дерево (конечно, с атрибутами key, поэтому что React может делать все, «какие биты оставить, какие выбросить, какие биты изменить на месте»). Вы отвечаете за то, как все должно выглядеть, а React отвечает за соответствующее обновление пользовательского интерфейса. Не пытайтесь выполнять работу React в своем собственном коде =)
Ответы 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 кнопок
или как я могу экспортировать номер индекса из функции карты
я совсем запутался, есть ли способ, которым мы могли бы общаться устно, мне действительно нужна помощь
Я редактировал свой ответ несколько раз. Пожалуйста, посмотрите на это еще раз и объясните, в какой части вы запутались. Я не думаю, что вы хотите использовать индекс последнего местоположения, размер местоположения гораздо проще получить доступ за пределами функции карты. Является ли переменная местоположения массивом?
да это массив
тогда вы можете просто использовать location.length, чтобы получить количество элементов в массиве.
if(locations.length < 4) { <button type="button"> Add </button> }
Таким образом, в основном кнопка будет появляться или исчезать в зависимости от того, истинно или ложно условие.
спасибо за это, но что, если кнопка находится за пределами функции карты, можно ли экспортировать номер индекса из функции карты ??
Вы заполняете массив адресов?
я совсем запутался, есть ли способ, которым мы могли бы общаться устно, мне действительно нужна помощь
Я не могу прямо сейчас, но если вы дадите более подробную информацию о том, как вы хотите, чтобы ваш компонент работал, возможно, я смогу вам помочь. Итак, первый вопрос: хотите ли вы отправить все четыре адреса сразу или по одному?
позвольте мне рассказать сценарий, мне нужно создать страницу, на которой человек может добавить 4 адреса, и после добавления четвертого адреса ввод и кнопки должны быть скрыты, когда пользователь удаляет один адрес из четырех добавленных, затем снова появляется ввод и кнопка
пожалуйста, направьте меня к лучшей практике для этого
Таким образом, вы можете использовать длину массива адресов в качестве условия вместо индекса. Таким образом, вы можете проверить, сколько адресов уже сохранено.
подождите, я добавляю изображения пользовательского интерфейса, это было бы более понятно
Вы можете просмотреть изображения пользовательского интерфейса и кода, чтобы понять, что я пытаюсь сделать.
Таким образом, вам просто нужно обернуть свои входы и кнопки, которые вы хотите скрыть, в операторе if, где вы проверяете «locations.length < 4», поэтому, если он меньше 4, они появятся, но если он равен или больше 4, они исчезнет.
да это так, но дело в кнопке и ввод лежит вне функции карты
Функция карты используется только для отображения всех адресов в массиве. Вам это не нужно для оператора if. Длина массива должна динамически изменяться при добавлении или удалении адреса.
так что я могу показать кнопки скрытия через длину местоположения (массива), это правильно ??
независимо от функции карты
Да, просто попробуйте это с простым оператором if и прокомментируйте, если это сработало.
о боже, какой я дурак, большое спасибо, Марин, я только что делал это с 13 часов, это сработало !!! Спасибо большое.
Добро пожаловать! Буду признателен, если вы проголосуете за мой комментарий. Удачи в том, что вы делаете!
Я бы хотел, но моей репутации недостаточно, чтобы сделать это, пожалуйста, не могли бы вы оставить свой адрес электронной почты, чтобы мы могли связаться
Добро пожаловать в СО. Вам может быть полезно прочитать сайт раздел помощи, когда речь идет о задать хороший вопрос и этом контрольный список вопросов. Код, над которым вы работали для решения проблемы, должен включать минимальный воспроизводимый пример и быть включенным в ваш вопрос. Вот некоторая документация о том, как создать фрагмент React..