@Nivaech

Как более элегантно изменить множество значений state на клик?

Есть выпадающее меню, которое открывается на клик. Их четыре штуки. И четыре boolean значения state для каждого из них.

state = {
 sidebarOpenMenu1: false,
 sidebarOpenMenu2: false,
 sidebarOpenMenu3: false,
 sidebarOpenMenu4: false,
}

Если их открывать поочередно, то предыдущее меню не закрывается, и они накладываются друг на друга. Проблема была решена грубым способом - индивидуальным условием, что если какое-то меню активно, то все другие должны закрыться:

handleSidebarOpenMenu1 = () => {
    this.setState({
         sidebarOpenMenu1: !this.state.sidebarOpenMenu1,
         sidebarOpenMenu2: false,
         sidebarOpenMenu3: false,
         sidebarOpenMenu4: false,
    })
}

handleSidebarOpenMenu2 = () => {
    this.setState({
         sidebarOpenMenu1: false,
         sidebarOpenMenu2: !this.state.sidebarOpenMenu2,
         sidebarOpenMenu3: false,
         sidebarOpenMenu4: false,
    })
}
...

И так далее для четырех пунктов меню.
Есть ли более элегантный способ решения проблемы без систематического копирования?
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Вместо состояния всех элементов храните имя/id/индекс открытого:

state = {
  opened: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ opened }) => ({
    opened: opened === name ? null : name,
  }));
}

https://jsfiddle.net/bexgm6uz/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы