У меня есть страница, содержащая несколько карт 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;