繁体   English   中英

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

Open and close React Material UI Snackbar component programmatically

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试在 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 框架。

非常感谢任何帮助!

1 个回复

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

2 [REACT]Material-ui 多个snackbar

我正在尝试使用材料 ui的 Snackbar 获得多个警告,到目前为止它们一直不成功,我看到了一些 Vue 的示例,但没有任何反应,有人可以帮助我吗? 按照我下面的代码 https://codesandbox.io/embed/withered-sunset-ru3p3?fontsize=14&a ...

4 React / Material UI-处理子组件中的打开/关闭框

因此,在父类中,我目前有以下代码段代码: 如您所见,我有一个'toEditBooking === true',如果满足条件,它将加载一个名为EditBooking的组件并传递一系列道具。 在名为EditBooking的子组件中,我具有以下内容: 第一次,这很好用,但是,如果 ...

5 Material UI Snackbar + Progress

我正在使用 Material UI (React) Snackbar notistack 。 我想在 Snackbar 中使用Material UI Progress 。 例如: 在这里面: 我正在使用动作道具,但它不起作用: 结果(仅显示 0%): 但我确信uploadPercentage ...

6 Material UI Snackbar 重叠

我正在使用 Material UI Snackbar。 我对 Material UI 不是很陌生,但不知何故我无法解决这个问题,即当它出现在屏幕顶部时,小吃店是重叠的。 我尝试了不同的方法来修复它,但没有运气。 请在下面找到 Snackbar 组件及其主体样式。 另请找到此屏幕截图: ...

7 如何从父组件打开 Material-UI 对话框 - React?

我知道已经有一些关于堆栈溢出的问题,但我一直在尝试使用他们的答案但没有成功; 所以我在这里发布我的代码,就像在我尝试不起作用的解决方案之前一样。 在使用类似方法之前,我已经能够使用 ant-design 从父组件打开一个模态,但在使用 Material-UI 时遇到问题。 我已经将我的模态(mat ...

8 React Material UI 选项卡关闭

我正在实现具有关闭功能的材料 ui 选项卡。 在关闭选项卡上无法设置当前选项卡中的活动选项卡值。 它给出警告错误。 代码和框中的代码 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM