我在React JS中有 n 数量的下拉菜单。当我点击第n个菜单项时,我想打开相应的下拉菜单。但我现在得到的是,点击菜单项后,所有下拉菜单都会打开。如何实现这一目标?
class Menubar extends React.Component {
constructor() {
super();
this.state = {
clicked: false
};
this.handleClick = this.handleClick.bind(this);
this.handleOutsideClick = this.handleOutsideClick.bind(this);
}
componentWillMount() {
document.addEventListener('click', this.handleOutsideClick, false);
}
componentWillUnmount(){
document.removeEventListener('click', this.handleOutsideClick, false);
}
handleClick() {
this.setState({clicked: !this.state.clicked});
}
handleOutsideClick(event){
if (!this.refs.megaMenu.contains(event.target)) {
this.setState({
clicked: false
});
}
}
render() {
return (
<div className="container">
<div className="menu-bar">
<div className="menu-bar-item" ref="megaMenu">
<a className="menu-bar-link" href="#" onClick={this.handleClick}>First Menu</a>
<div className={"mega-menu"+" "+this.state.clicked}>
<div className="mega-menu-content">
<p>First Menu</p>
</div>
</div>
</div>
<div className="menu-bar-item" ref="megaMenu">
<a className="menu-bar-link" href="#" onClick={this.handleClick}>Second Menu</a>
<div className={"mega-menu"+" "+this.state.clicked}>
<div className="mega-menu-content">
<p>Second Menu</p>
</div>
</div>
</div>
<div className="menu-bar-item" ref="megaMenu">
<a className="menu-bar-link" href="#" onClick={this.handleClick}>Third Menu</a>
<div className={"mega-menu"+" "+this.state.clicked}>
<div className="mega-menu-content">
<p>Third Menu</p>
</div>
</div>
</div>
<div className="menu-bar-item" ref="megaMenu">
<a className="menu-bar-link" href="#" onClick={this.handleClick}>Fourth Menu</a>
<div className={"mega-menu"+" "+this.state.clicked}>
<div className="mega-menu-content">
<p>Fourth Menu</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<Menubar />,
document.getElementById('example')
);
答案 0 :(得分:2)
您已使用单个状态,即单击所有菜单项,这将在调用setState时对所有菜单进行分解。
您应该有单独的状态来检查每个菜单项的点击次数。或者说一个数组说点击[]。然后更改特定单击状态的值。 例如: ...
<div className="menu-bar-item" ref="megaMenu">
<a className="menu-bar-link" href="#" onClick={this.handleClick.bind(this,1)}>Second Menu</a>
<div className={"mega-menu"+" "+this.state.clicked[1]}>
<div className="mega-menu-content">
<p>Second Menu</p>
</div>
</div>
</div>
.... 并将handleClick定义为
handleClick(index,e) {
let clicked=this.state.clicked;
clicked[index]=!clicked[index]
this.setState({clicked:clicked});
}
这是codepen链接: http://codepen.io/anon/pen/oLRbmq
答案 1 :(得分:1)
由于这个<div className={"mega-menu"+" "+this.state.clicked}>
,所有下拉列表都被选中,它们都使用状态中的相同变量 - clicked
,因此如果你点击其中一个全部改变状态。如果你只想要一个要获取选定的特定下拉列表,您需要在状态中为每个相应的下拉元素声明一个新变量,并相应地更改逻辑handleClick
。