以编程方式打开和关闭 React Material UI Snackbar 组件

Question

我正在尝试在 React/Material-UI 中编写 SPA，但遇到了一些问题。我开发了一个从导航栏上的按钮启动的模式登录框。当用户按下提交时，我使用 fetch 调用后端 api，并根据返回的状态代码的结果，我想打开带有某些信息的快餐栏组件或关闭模式登录窗口。

我学会了通过单击链接来打开小吃店，但是如何以编程方式打开一个？我还需要在 api 调用成功后关闭我的模式窗口，我也不知道如何实现这一点。我也可以通过手动单击绑定到导航栏上原始按钮的链接来实现此目的。

我尝试使用文档中的基本小吃吧示例并将其放在单独的组件中，但它仅显示如何通过单击实际 Snackbar 功能组件中已有的链接来启动它们。我需要知道如何以编程方式从另一个组件中显示小吃栏。

我很确定我遗漏了一些明显的东西:)

Login.js React 组件

import React, {Component} from 'react'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import CustomizedSnackbars from './CustomSnackbars'

class LoginDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {username: "",
                      password: ""};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
      <some code>
    }

    handleSubmit(event) {
        event.preventDefault();
        const data = {
            "username":this.state.username,
            "password":this.state.password
        }

        fetch("https://mywebsite.com/auth/login", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body:  JSON.stringify(data)
        })
        .then(function(response){
            if (response.status === 200) {
                console.log("good boye") 
                //---------------------------------
                // WANT TO CLOSE LOGIN DIALOG HERE;
                //---------------------------------
            } else if (response.status === 401) {
                console.log("naughty naughty")
                //---------------------------------
                // WANT TO DISPLAY SNACKBAR HERE
                //---------------------------------
            } else if (response.status === 502) {
                console.log("off it's hinges, innit")
            } else {
                console.log("sumat went bang")
            }
            return response.json();
        });
    }

    render() {
        return (
            <div className="modal-outer">
            <div className="modal-inner">
                <h3>Login</h3>
                <TextField
                />
                <br />
                <TextField
                />
                <Button variant="outlined" onClick={this.props.closePopup} color="secondary">
                    Cancel
                </Button>
                &nbsp;
                <Button variant="outlined" onClick={(event) => this.handleSubmit(event)} color="primary">
                    Login
                </Button>
            </div>
            </div>
        );
  }
}

export default LoginDialog

我可以在 Snackbar 组件上调用/制作某种 displaySnackbar 方法吗？如何在功能组件上调用方法或函数？

我很难理解 React 如何组合在一起。我主要是后端开发人员，但我过去使用过 JQuery 和其他 Javascript 框架。

非常感谢任何帮助！

Answer 1

在 React 中，您只能显示 render() 内部的内容。这意味着您需要在渲染中包含快餐栏组件。您可以使用条件渲染来决定是否显示它们。通常这是通过组件状态中的某个值来完成的。您应该在构造函数中将状态标志初始化为false，然后在获取响应代码中调用setState() 将其设置为true。