以編程方式打開和關閉 React Material UI Snackbar 組件

Question

我正在嘗試在 React/Material-UI 中編寫 SPA，但遇到了一些問題。 我開發了一個從導航欄上的按鈕啟動的模式登錄框。 當用戶按下提交時，我使用 fetch 調用后端 api 並根據返回的狀態代碼的結果，我想打開帶有某些信息的快餐欄組件或關閉模式登錄 window。

我已經學會了通過單擊鏈接來打開小吃店，但是如何以編程方式打開一個？ 在 api 調用成功后，我還需要關閉我的模態 window ，我也不知道如何實現這一點。 我也可以通過手動單擊綁定到導航欄上原始按鈕的鏈接來實現這一點。

我已經嘗試使用文檔中的基本小吃吧示例並將其放在一個單獨的組件中，但它只顯示了如何通過單擊實際 Snackbar 功能組件中已經存在的鏈接來啟動它們。 我需要知道如何從另一個組件以編程方式顯示小吃吧。

我很確定我錯過了一些明顯的東西:)

Login.js 反應組件

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()中顯示內容。 這意味着您需要在渲染中包含快餐欄組件。 您可以使用條件渲染來決定是否顯示它們。 通常這是通過組件 state 中的某個值來完成的。 您應該在構造函數中將 state 標志初始化為false ，然后在獲取響應代碼中調用setState()將其設置為true 。