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

我正在尝试在React/Material UI中编程SPA，但我遇到了一些问题。我开发了一个模式登录框，它是从导航栏上的按钮启动的。当用户按下submit时，我使用fetch调用后端api，根据返回的状态代码的结果，我想打开一个包含特定信息的snackbar组件或关闭模式登录窗口

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

我尝试过使用文档中的基本snackbar示例，并将其放在一个单独的组件中，但它只显示了如何通过单击实际snackbar功能组件中已有的链接来启动这些组件。我需要知道如何从另一个组件以编程方式显示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

import React，{Component}来自“React”
从“@material ui/core/Button”导入按钮
从“@material ui/core/TextField”导入TextField
从“/customsnackbar”导入自定义snackbar
类LoginDialog扩展了组件{
建造师（道具）{
超级（道具）；
this.state={username:“”，
密码：“}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
}
handleSubmit（事件）{
event.preventDefault（）；
常数数据={
“用户名”：this.state.username，
“密码”：this.state.password
}
取回（“https://mywebsite.com/auth/login", {
方法：“张贴”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（数据）
})
.然后（功能（响应）{
如果（response.status==200）{
console.log（“好男孩”）
//---------------------------------
//要关闭此处的登录对话框；
//---------------------------------
}else if（response.status==401）{
console.log（“淘气淘气”）
//---------------------------------
//想在这里显示SNACKBAR吗
//---------------------------------
}else if（response.status==502）{
控制台。日志（“脱离铰链，不是吗”）
}否则{
log（“sumat爆炸了”）
}
返回response.json（）；
});
}
render（）{
返回(
登录


取消
this.handleSubmit（event）}color=“primary”>
登录
);
}
}
导出默认登录日志

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

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

---

非常感谢任何帮助

在React中，只能显示

render（）中的内容。这意味着您需要在渲染中包含snackbar组件。可以使用条件渲染来决定是否显示它们。通常这是由组件状态中的某个值完成的。您应该在构造函数中将状态标志初始化为
false
，然后在获取响应代码中调用
setState（）
，将其设置为
true
，
谢谢您的回复：）只是为了澄清一下；如果在我的
handleSubmit
函数中设置标志的状态，是否会再次自动调用
render（）
？如何以编程方式关闭模式登录窗口？这是类似的方法吗？就像我说的，我可以通过点击一个链接来关闭模态窗口，但是我如何在没有手动干预的情况下关闭模态窗口？我如何在不点击链接的情况下打开snackbar组件？这些文档没有提供任何关于如何从另一个组件执行此操作的线索，只提供了通过调用函数从组件本身执行此操作的线索。在默认情况下，是否有必要执行类似于
的操作，因为它没有打开。我现在收到了有关
未处理拒绝的错误（TypeError）：这是未定义的
我正在从
handleSubmit
函数中调用名为ToggleSnack的新函数，类似于
this.ToggleSnack（）
。我已经在构造函数中用
this.toggleSnack=this.toggleSnack.bind（this）绑定了它
All
ToggleSnapshot
的作用是更改状态变量。我尝试过多种组合，只调用ToggleShack函数而不使用
this.
，有无绑定，有无括号，都没有乐趣。@clg123 1。是的，调用
setState（）
会自动触发对
render（）
（最终）的调用。2.是的，您可以使用类似的方法选择显示或不显示（即关闭）模式登录窗口。3.使用条件渲染显示（或不显示）快餐店。4.对于您现在遇到的错误，您应该发布一个新问题，并添加一个。谢谢。我已经设法让snackbar在我想要的时候出现——结果它都在绑定中。非常感谢你为我指明了正确的方向。如果我无法关闭模式窗口，那么我将按照您的建议发布一个新问题。