Выпадающее меню Bootstrap в ReactJS, только одно открытое за раз

У меня есть страница, содержащая несколько карт Bootstrap, и каждая карта является компонентом, и каждый нижний колонтитул карты также является компонентом. Нижний колонтитул содержит кнопки. Когда вы нажимаете на кнопку, выпадающее меню будет открыто, как показано ниже.

enter image description here

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

enter image description here

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

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

Моя архитектура подобна ниже

enter image description here

ГЛАВНАЯ СТРАНИЦА КОМПОНЕНТНОГО КОДА -START

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      activatedIdStoredInParent: ""
    };
  }
  toggleCountersMenu = (name) => {
    var name1 = name;
    this.setState((prevState) => {
      return {
        activatedIdStoredInParent: name1
      }
    });
  } 

  render() {
   
    const products = this.state.items.map((item, index) => {     
      return <div>
        <Card
          product={item}
          activatedIdStoredInParent={this.state.activatedIdStoredInParent}
          toggleCountersMenu={this.toggleCountersMenu}
        >
        </Card>;
      </div>
    });

    return (
      <div>
        <div className="card-columns">
          {products}
        </div>
      </div >
    );
  }
}

export default HomePage;

Ответы

Ответ 1

Вы можете использовать жизненный цикл componentDidUpdate, чтобы обновить свойство состояния, открывающее раскрывающийся список. Я не знаю, является ли это open или show свойство, которое отображает содержимое раскрывающегося списка, но здесь моя логика.

class ButtonDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 
    };
  }

  componentDidUpdate(prevProps) {
    const name = this.props.product.name + '$$' + this.props.text;

    if (prevProps.activatedIdStoredInParent !== this.props.activatedIdStoredInParent && this.props.activatedIdStoredInParent !== name) {
      this.closeDropDown();
    }
  }

  closeDropDown = () => this.setState({ isOpen: false });

  toggleOpen = (e) => {
    //
  }

  numberClick = (e) => {
   //
  }

  render() {
   //
  }
}

export default ButtonDropdown;