Переход по ссылкам по нажатию клавиш влево/вправо, js?

Question

[beefront17]

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

const location = nextProps.location.pathname;
      const history = nextProps.history;
      const k = nextProps.keydown.event.which;

      if (k === 37 && location=== '/index/loc1') {
        history.push('/index');
      }

      if (k === 39 && location=== '/index') {
        history.push('index/loc1');
      }

Сейчас есть два табы, которые при нажатии влево / вправо соответственно переключаються. Но нужно добавить еще табов.
Для этого использую 'react-keydown'.
Если прописываю еще один if при нажатии выполняются сразу два.
Спасибо!

Answer 1

[Роман Александрович]

ереписать данное условие, если количество вариантов location более двух.

https://learn.javascript.ru/switch

Comments

[beefront17]

k === 37 && location=== '/index/loc1'
Как в switch case записать это условие?

[Роман Александрович]

beefront17,

switch(location){
    case k === 37 && '/index/loc1':
        alert( '/index/loc1' );
        break;

    case k === 39 && '/index/loc2':
        alert( '/index/loc2' );
        break;
}

папробуйте так

[beefront17]

Роман Александрович, это условие находиться в componentWillReceiveProps.
При такой записи перескакивает на последний всегда

[Роман Александрович]

beefront17,
папробуйте вот так

if (k === 37 && location=== '/index/loc1') {
        history.push('/index');
      }
      else if (k === 39 && location=== '/index') {
        history.push('index/loc1');
      }else{
      }

[beefront17]

Роман Александрович, так же

[Роман Александрович]

beefront17, покажите пожалуста в консоле что вам выдает k и location

[beefront17]

Роман Александрович, выдает все как должно, только на одно нажатие виполняються все условие на это key

[Kovalsky]

beefront17, фишка в том, что такое невозможно. Условия k === 37 и k === 39 не могут выполняться одновременно. Либо вы что-то неправильно поняли, либо вы неправильно проверяете данные.

Можете попробовать например вывести в лог не значение k, а как раз ваши условия: console.log(k === 37, k === 39, k === 37 && k === 39)

[Роман Александрович]

beefront17, просто выведите в консоль пожалуйста значения k и location что б я мог написать нормальную проверку т.к. вы что-то не так делаете

[beefront17]

Никита Полевой, я выполняю

if (k === 37 && location=== '/index/loc1') {
...
}  else if (k === 37 && location=== '/index/loc2'){
...
}

key тот же

[beefront17]

Роман Александрович,
37, '/index/loc1'

[Роман Александрович]

beefront17, пожалуйста напишите console.log("location", location)
затем в браузере нажмите f12 найдите слово location сделайте скрин и покажите нам
иначе мы будем еще 2 часа топтаться

[beefront17]

Роман Александрович,

[Роман Александрович]

beefront17,
начнем с простова

if (location== '/index/loc1') {
console.log("loc1")
}  else if (location== '/index/loc2'){
console.log("loc3")
}else{
console.log("else",typeof location)
}

[beefront17]

loc1, loc3 соответственно
string

[Kovalsky]

beefront17, нуу, значит у вас просто два раза выполняется эта функция - сначала с одной локацией, потом с другой) Почему - вероятно какая-то ваша ошибка в организации функций реакта.

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

[Роман Александрович]

beefront17, соглашусь с Никита Полевой
ищите в каком моменте у вас происходит вызов функции
и покажите весь компонент может что-то проеснится

[beefront17]

Роман Александрович, в componentWillReceiveProps при нажатии на клавиши почему-то два раза приходят props

[Роман Александрович]

beefront17, ну тогда напишите так

componentWillReceiveProps(nextProps){
console.log("nextProps",nextProps)
}

и пасмотрите чем первый отличается от второго
тогда вы паймете где произошло изщменение

[beefront17]

Роман Александрович, Никита Полевой, ситуацию решает setTimeout.
Насколько это нормально его использовать в componentWillReceiveProps?

[Роман Александрович]

beefront17, эт прохая идея

[Kovalsky]

beefront17, почитайте выдачу гугла по запросу "componentwillreceiveprops multiple times", как раз ваша тема; там есть статьи с описаниями, примерами и решениями.

[beefront17]

Роман Александрович, А если так? Это ведь проблема что ивент запускаеться два раза.

componentWillReceiveProps(nextProps) {
    if (nextProps.keydown.event) {
      const key = nextProps.keydown.event.which;
      const location = nextProps.location.pathname;
      const history = nextProps.history;
      if (key === 39 && location === '/index') {
        this.timeOut(history, '/index/loc1');
      } else if (key === 39 && location === '/index/loc1') {
        this.timeOut(history, '/index/loc2');
      } else if (key === 37 && location === '/index/loc1') {
        this.timeOut(history, '/index');
      } else if (key === 37 && location === '/index/loc2') {
        this.timeOut(history, '/index/loc1');
      }
    }
  }

  timeOut = (history, loc) => setTimeout(() => history.push(loc), 100);

[Роман Александрович]

beefront17, товарищ это говнокод. Ну в крайнем случае можно оставить но по хорошему вам нужно в условии if (nextProps.keydown.event) {
дописать условие при котором данный if будет выполняться только 1 раз.
Как вариант тожно написать так

constructor(){
   this.state = {redirect:true}
}

componentWillReceiveProps(nextProps) {
    if (nextProps.keydown.event && this.state.redirect ===true) {
this.setState({
redirect:false
})
      const key = nextProps.keydown.event.which;
      const location = nextProps.location.pathname;
      const history = nextProps.history;
      if (key === 39 && location === '/index') {
        this.timeOut(history, '/index/loc1');
      } else if (key === 39 && location === '/index/loc1') {
        this.timeOut(history, '/index/loc2');
      } else if (key === 37 && location === '/index/loc1') {
        this.timeOut(history, '/index');
      } else if (key === 37 && location === '/index/loc2') {
        this.timeOut(history, '/index/loc1');
      }
    }
  }

[beefront17]

Роман Александрович, в какой момент делать

this.setState({
redirect: true
})

А то оно только один раз выполняеться.

[Роман Александрович]

beefront17, я ж вам написал что если вам нужно что бы данный if выполнился 1 раз то вы можете папробовать вот этот вариант. Это как флаг который вы можете изменять и в разное время редирект либо пройдет либо нет

Answer 2

[Kovalsky]

Используйте например массив строк:

history.push( locations[ current_location_index ] );

Comments

[beefront17]

не понял как это поможет

[Kovalsky]

beefront17, нууу, как. А в чем у вас проблема? Мне показалось, вы хотите организовать обработку так чтобы можно было бесконечно увеличивать количество таб не добавляя кастомного кода для обработки каждого конкретного случая. Если так, то любая структура данных типа массива или объекта будет решением.