Я разработал выпадающее меню, которое открывается при нажатии кнопки и закрывается при нажатии на ту же кнопку или в любом месте внутри тела.Я написал функцию, которая переключает значение логического бита на onClick()
, и другую функцию, которая устанавливает логический бит на false на onBlur()
, которая прекрасно работает так, как мне нужно.
Header.jsx
_handleProfileMenuClick = () => {
this.setState((prevState) => ({ isProfileMenuVisible: !prevState.isProfileMenuVisible }));
};
_profileMenuClose = () => {
this.setState({ isProfileMenuVisible: false });
};
<div className={`${styles.dropdown} ${classes.dropdown}`}>
<img src={require('../assets/images/Down arrow.svg')}
alt='' tabIndex='-1' onBlur={this._profileMenuClose}
onClick={this._handleProfileMenuClick}/>
{this.state.isProfileMenuVisible ? <ProfileMenuDropDown /> : null}
</div>
ProfileMenuDropDownComponent.jsx
<ul className={classes.customdropdown}>
<h4>Your Account</h4>
<Link to='/' onClick={this._profileMenuClose}>
<img src={require('../assets/images/viewprofile.svg')} alt={'avatar'} />
View Profile
</Link>
<Link to='/edit/profile' onClick={this._profileMenuClose}>
<img src={require('../assets/images/editproflle.svg')} alt={'avatar'} />
Edit Profile
</Link>
<h4>Primary Settings</h4>
<Link to='/' onClick={this._profileMenuClose}>
<img src={require('../assets/images/termsnconditions.svg')} alt={'avatar'} />
Terms and Conditions
</Link>
<Link to='/' onClick={this._profileMenuClose}>
<img src={require('../assets/images/faq.svg')} alt={'avatar'} />
Faqs
</Link>
</ul>
Моя проблема в том, что ни один из Link to
не работает из-за функции onBlur()
.Когда я удаляю onBlur()
, перенаправление ссылок работает правильно.