Якорный тег не работает внутри компонента с помощью onBlur () - PullRequest
0 голосов
/ 08 февраля 2019

Я разработал выпадающее меню, которое открывается при нажатии кнопки и закрывается при нажатии на ту же кнопку или в любом месте внутри тела.Я написал функцию, которая переключает значение логического бита на 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(), перенаправление ссылок работает правильно.

...