Question

当我单击下拉菜单中的“注销”元素时，我想注销用户。

但是当我单击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

在没有或之后关闭锚标记的函数调用中，只有onclick功能会起作用。我认为您的工作一切都很好，但是箭头符号已覆盖了定位标记的关闭。所以只要检查一下就可以了

Answer 2

 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 3

我设法通过手动切换下拉菜单中的“显示”类来解决此问题

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>

React onClick事件未在引导下拉菜单上触发

3 个答案: