Question

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

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。

Answer 1

是的，所以你的代码中有几个错误：

当你在这里使用ES6类时，你的方法不会自动提示意味着如果你的JSX上有一个事件处理程序，如this.open，那么this是错误的上下文，所以你在函数中执行将无法使用this。要修复，绑定某个地方，最好是在构造函数中，但可以内联：

onClick={this.open.bind(this)}

第二个问题是函数本身正在做一些随机的事情。当然this.showModal会因为上面提到的绑定问题而抛出错误，但即使使用绑定，也不是访问/设置状态变量的方式。相反，切换到：

this.setState({ showModal: true }) // or false for `close`

然后它应该开始正常工作。

未捕获的TypeError：无法读取属性＆＃39; showModal＆＃39;为null

1 个答案: