[英]How have toggle dropdown on button click and close on outside click?
我有下拉菜单,通过单击按钮可以打开,而单击外部按钮则可以关闭。
这是切换下拉菜单的功能:
toggleAllCategories = () => {
this.setState({ isOpenAllCategories: !this.state.isOpenAllCategories });
};
这意味着通过单击按钮,您应该打开和关闭下拉菜单。
但是在同一时间,我实现了带有react-refs
,该功能在下拉菜单的主体之外单击---> close下拉菜单。
那使错误-复制:
步骤1 :点击“所有类别” btn
结果:下拉列表处于打开状态
步骤2 :再次点击“所有类别” btn-想要关闭下拉菜单
结果:结果下拉列表打开。
这里是问题-> 2.再次单击“所有类别” btn
首先称为handleOutsideClick()
函数,该函数将isOpenAllCategories on false
设置isOpenAllCategories on false
。
然后称为toggleAllCategories()
,它根据当前值isOpenAllCategories: !this.state.isOpenAllCategories
来更改状态isOpenAllCategories: !this.state.isOpenAllCategories
且为true
, handleOutsideClick()
已更改为false
状态。
如何在按钮单击上切换下拉菜单并在外部单击上关闭?
所有类别下拉菜单组件:
class AllCategories extends Component {
componentDidMount() {
document.addEventListener('mousedown', (e) => this.handleClickOutside(e));
}
componentWillUnmount() {
document.removeEventListener('mousedown', (e) => this.handleClickOutside(e));
}
setWrapperRef(node) {
this.wrapperRef = node;
}
handleClickOutside = (event) => {
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
this.props.closeAllCategories();
}
};
render() {
return (
<div className="all-categories-wrapper">
<div className="all-categories" ref={(node) => this.setWrapperRef(node)}>
<ul className="all-categories-list">
<li className="all-categories-list-item">All Categories</li>
{this.state.allCategories.map((category) => (
<li
className={`all-categories-list-item ${
category.selected ? 'all-categories-list-item-active' : ''
}`}
>
{category.name}
</li>
))}
</ul>
</div>
</div>
);
}
}
所有类别按钮组件:
export default ({ toggleAllCategories, className }) => (
<div className="category" onClick={() => toggleAllCategories()} role="button">
<div className={`category-button-wrapper ${className}`}>
<button className="category-button">
Sports <span className="category-button-slash">/</span> Football
</button>
<div className="category-icon-box">
<span className="category-icon">
<i className="material-icons md-30 md-white">expand_more</i>
</span>
</div>
</div>
</div>
);
代码不工作,因为这在组件的功能范围。 您必须将函数绑定到组件的构造函数中。 或将您的功能更改为ES6,即可解决问题
//binding
constructor(props){
super(props)
this.handleClickOutside = this.handleClickOutside.bind(this);
}
handleClickOutside = () => {
//code here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.