Событие React onClick не запускается в раскрывающемся меню начальной загрузки

Question

Я хочу выйти из системы, когда я нажимаю на элемент «logout», расположенный внутри выпадающего меню.

, но событие onClick не запускается при нажатии на него.

это код

    <nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    ...

      <ul className="navbar-nav ml-auto">
                <li className="nav-userdata dropdown" data-toggle="dropdown" role="button"
                    aria-haspopup="true" aria-expanded="false" >
                    <img src={user.avatar} className={"avatar"} alt={"user avatar"}
                        />
                    <div  className="dropdown-toggle" >{user.name}</div>
                        <ul className="dropdown-menu bg-dark">
                            <li><a href={"#"} onClick={() => console.log("logout")}>Logout</a></li>
                            <li><a href="#">Dashboard</a></li>
                        </ul>
                    <span className="caret"></span>
                </li>
            </ul>
    ...
      </nav>

в консоли нет ошибок, onClick работает так, как задумано, когда я добавляю его вне выпадающего меню.

есть способ заставить это работать при использовании начальной загрузкивыпадающее меню?

Answer 1

 You need e.preventDefault() in the click handler.

It's firing but the default behavior of an anchor is to refresh the page, so 
it's just rerendering immediately.

<li><a  onClick={(e) => this.logout(e)}>Logout</a></li>

logout =(e) =>{
  e.preventDefault()
  console.log('logout')
 }

попробуйте что-то вроде этого, может это сработает

Answer 2

Мне удалось решить эту проблему, вручную переключив класс 'show' в выпадающем меню

const [isDropdownOpen,setDropdown] = useState(false);
const logout = () => {
        dispatch(logoutUser());
    };

 <nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
    ...

       <ul className="navbar-nav ml-auto" onClick={() => setDropdown(!isDropdownOpen)}>
            <li className="nav-userdata dropdown" >
                <img src={user.avatar} className={"avatar"} alt={"user avatar"}
                     title={"You must have a gravatar connected to display the avatar"}/>
                <div className={"dropdown-toggle"}>{user.name}</div>
                    <ul id={'dropdown-userdata'} className={classnames('dropdown-menu bg-dark dropdown-userdata', {'show': isDropdownOpen})}>
                        <li><a href={'#'} className='nav-link'  onClick={logout}>Logout</a></li>
                        <li><Link to={'/dashboard'} className={'nav-link'}>Dashboard</Link></li>
                    </ul>
                <span className="caret"></span>
            </li>
        </ul>
    ...
      </nav>

Answer 3

При вызове функции закрытие тега привязки без и после этого будет работать только функция onclick. Я думаю, что все хорошо с вашей работой, но символ стрелки перекрывает закрывающий тег. Так что просто проверьте, что он будет работать нормально