Question

在我的导航栏组件中，我的状态是存储是否打开弹出窗口的布尔值，以及在遵循正确操作后更改此状态的函数

这是我的代码：

import React, { Component } from 'react'

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

import Popup from 'reactjs-popup';

export default class NavBar extends Component {

  constructor(props) {
    super(props);

    this.state = {
        showSignUp: false
    }

    this.signUp = this.signUp.bind(this);
  }

  signUp() {
    this.setState(prevState => ({
      showSignUp: !prevState.showSignUp
    }));

    console.log(this.state.showSignUp);
  }

  render() {
    return (
        <div>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="/">Recruiting App</Navbar.Brand>
                <Nav className="ml-auto">
                <Nav.Link href="/">Home</Nav.Link>
                {
                    this.props.auth.isAuthenticated() && (
                      <Nav.Link href="/dashboard">Dashboard</Nav.Link> 
                    )
                }
                {
                    !this.props.auth.isAuthenticated() && (
                        <Nav.Link onClick={this.signUp}>Sign Up</Nav.Link>
                    )
                }
                {
                    !this.props.auth.isAuthenticated() && (
                        <Nav.Link onClick={this.props.auth.login}>Login</Nav.Link>
                    )
                }
                {
                    this.props.auth.isAuthenticated() && (
                      <Nav.Link onClick={this.props.auth.logout}>Logout</Nav.Link>  
                    )
                }
                </Nav>
            </Navbar>

            <Popup open={this.state.showSignUp} onClose={this.signUp} modal closeOnDocumentClick>
              <div>
                This is a test popup
              </div>
            </Popup>

        </div>
    );
  }
}

当我第一次单击注册时，我的控制台记录为“ false”

然后当我单击文档以关闭弹出窗口时，控制台记录为true，然后立即为false，并且弹出窗口不会消失

Answer 1

作为@divine在问题中的评论，setState是异步的，请尝试使用setState回调检查正在发生的事情。

https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296

reactjs-popup无法正确更改状态

1 个答案: