我尝试使用 此处 的代码并将登录重构为模态框。不幸的是，单击 登录 时出现以下错误：

Uncaught TypeError: Cannot read property 'showModal' of null

这是我的Navigation.js

import React, { Component, PropTypes } from 'react';
import { Button, Modal, Nav, Navbar } from 'react-bootstrap';
import { IndexLinkContainer } from 'react-router-bootstrap';
import Login from '../Login/Login';
import Logout from '../Logout/Logout';
import { loginUser, logoutUser } from '../../actions/actions'
import './Navigation.css'

export default class Navigation extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = {
            showModal: false
        };
    }

    open() {
        this.showModal.setState = true
    }

    close() {
        this.showModal.setState = false
        }

    render() {

        const { dispatch, isAuthenticated, errorMessage } = this.props;


        return (
            <div>
                <Navbar className="navbar navbar-default navbar-fixed-top">
                    <Navbar.Header>
                        <Navbar.Brand>
                            <IndexLinkContainer to="/"><a href="/">myApp</a></IndexLinkContainer>
                        </Navbar.Brand>
                        <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav pullRight>

                            {!isAuthenticated &&
                            <Button bsStyle="primary" onClick={this.open}>Login</Button>
                            }

                            {isAuthenticated &&
                            <Logout onLogoutClick={() => dispatch(logoutUser())} />
                            }

                        </Nav>
                    </Navbar.Collapse>
                </Navbar>

                <Modal show={this.state.showModal} onHide={this.close}>
                    <Modal.Header closeButton>
                        <Modal.Title>Login</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Login
                            errorMessage={errorMessage}
                            onLoginClick={ creds => dispatch(loginUser(creds)) }
                        />
                    </Modal.Body>
                </Modal>
            </div>
        )
    }

}

Navigation.propTypes = {
    dispatch: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool.isRequired,
    errorMessage: PropTypes.string,
}

页面加载正常，但我的模态框无法通过单击按钮启动。我正在使用react和react-bootstrap。