小编Abh*_*bhi的帖子

ReactJS中的Bootstrap下拉列表,一次只打开一个

我有一个页面包含多个Bootstrap卡,每个卡是一个组件,每个卡页脚也是一个组件.卡页脚包含按钮.当您单击按钮时,下拉菜单将如下所示打开

在我点击按钮的任何时候,其他下拉应该处于关闭状态.但它发生这样......

要求:还有一件事是当我点击相同的按钮时,应该关闭相应的下拉菜单.

要求:当我点击下拉内的任何项目时,应关闭相应的下拉菜单

我的架构如下

主页组件代码-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;

Run Code Online (Sandbox Code Playgroud)