@campus1

Как сделать toogle кнопок?

Всем привет. Есть у меня задача сделать переключатель контента внутри компоненты, с помощью нажатия на кнопки Next / Prev. Я написал для этого ф-цию changeContent (увидеть ее вы сможете по ссылке ниже). На onClick у меня вызывается ф-ция changeContent. В той ф-ции происходит след:
  • Берутся все данные (массив) с редакс стора
  • Ищется индекс нашего элемента в массиве, который мы получили выше.
  • Если action next то берем +1 если prev то -1
  • Достаем новый элемент по полученому индексу
  • И обновляем url

В компонента у меня стоит lifecycle method componentDidUpdate
componentDidUpdate(prevProps) {
    const {
      isBlockNavButtons,
      params: { id }
    } = this.props;
    if (this.props.location !== prevProps.location) {
      isBlockNavButtons(null, id, "diagnosis");
      getQuestionById("diagnostics", "createQuestion", id);
    }
  }


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

Теперь вопрос: Допустим я на элементе под индексом 1. Нажал changeContent("prev"), данные индекса 0 подтянулись, кнопка Prev заблочена, все как нужно. Но теперь когда я нажимаю на next, у меня данные меняются, но prev кнопка так и остается disabled.

Где мне прописать логику для этого и как, а то я что туплю немного((

Код на GIST
Код на JSFIDDLE
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
isBlockNavButtons отвечает за логику disable для тех кнопок. То есть если у нас элемент последний или первый, то мы блочим нужную нам кнопку.

А почему эта функция работает только в одну сторону - на блокировку? Пусть и обратную операцию тоже выполняет. Кроме того, работает она некорректно, если элемент всего один - в этом случае надо блокировать обе кнопки, но поскольку условия блокировки у вас зависимы, блокируется только одна.

В общем, я бы заменил if-else на что-то такое:

dispatch({
  type: `${CREATE_QUESTION}_BLOCK_BUTTON`,
  payload: {
    blockPreviousButton: elementIndex === 0,
    blockNextButton: elementIndex === data.length - 1,
  },
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект