任何人都可以帮助我弄清楚为什么此下拉onclick事件仅触发一次?第一次单击它时,它将显示下拉菜单,但是当我再次单击它时,它什么也没做。我累了要添加一个与下拉标签具有相同的onclick事件的按钮,它实际上可以完成工作。
import React, {Component} from 'react';
import _ from 'lodash';
import Axios from 'axios';
import * as Config from '../config';
import connect from "react-redux/es/connect/connect";
import * as UserAction from '../actions/user.action';
class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
show: false,
}
}
componentWillMount() {
const {dispatch} = this.props;
dispatch(UserAction.fetchUser());
}
render() {
const {user} = this.props;
const {show} = this.state;
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href={`${Config.APP_URL}`}>Q&A</a>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href={`${Config.APP_URL}`}>Home</a>
</li>
<li className="nav-item active">
<a className="nav-link" href={`${Config.APP_URL}/questions`}>Recent</a>
</li>
</ul>
{_.isEmpty(user) ?
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href={`${Config.APP_URL}/login`}>Login</a>
</li>
< li className="nav-item">
< a className="nav-link" href={`${Config.APP_URL}/register`}>Register</a>
</li>
</ul> :
下面的onclick事件仅触发一次
<ul className="navbar-nav ml-auto">
<li className={`nav-item dropdown ${show ? 'show' : ''}`}>
<a className="nav-link dropdown-toggle" href="#" role="button"
data-toggle="dropdown" aria-haspopup={show ? "true" : "false"}
aria-expanded={show ? "true" : "false"}
onClick={(e) => {
e.preventDefault();
this.setState({
show: !show,
});
}}
>
Wei Chen <span className="caret"></span>
</a>
<div className={`dropdown-menu dropdown-menu-right ${show ? 'show' : ''}`}
aria-labelledby="dropdownMenuButton">
<a className="dropdown-item" href={`${Config.APP_URL}/profile/${1}`}>My
Profile</a>
<a className="dropdown-item"
onClick={(e) => {
e.preventDefault();
Axios.post(`${Config.APP_URL}/logout`).then((e) => {
});
}}>
Logout
</a>
</div>
</li>
</ul>
}
<a className="btn btn-primary my-2 my-sm-0" href="/questions/create">Ask a Question</a>
</div>
</nav>
);
}
}
let select = (state) => {
return {
user: state.userReducer.user,
}
};
export default connect(select)(NavBar);