反应下拉onclick事件仅触发一次

时间:2018-12-27 03:55:14

标签: javascript reactjs dropdown

任何人都可以帮助我弄清楚为什么此下拉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);

0 个答案:

没有答案