锚标记在onBlur（）组件内部不起作用

Question

我设计了一个自定义菜单下拉菜单，单击该按钮时将打开该菜单，而单击同一按钮或在体内任何位置时，该菜单将关闭。我写了一个函数，用于切换onClick()上的布尔位的值，另一个函数是将onBlur()上的布尔位设置为false，这很好地满足了我的需要。

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()时，链接重定向正常工作。