我正在尝试在React / Material-UI中编写SPA,但遇到了一些问题。 我已经开发了一个模式登录框,该对话框是通过导航栏上的按钮启动的。 当用户按下Submit时,我使用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框架。

任何帮助,不胜感激!

#1楼 票数:0 已采纳

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

  ask by clg123 translate from so

未解决问题?本站智能推荐:

2回复

[REACT]Material-ui 多个小吃店

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

如何将Material-UI的快餐栏和输入组件结合在一起进行反应?

我正在使用Material-UI组件来构建我的网站。 我有一个带有搜索字段的标头组件,它在后台使用mui InputBase 。 当用户输入空输入时(也就是说,他们什么也不输入,只需单击Enter),我想显示一个Mui Snackbar ,它将警告用户未输入任何有意义的输入。 我无法将
3回复

React Material UI - 当 Dialog 关闭但不应该关闭时,Snackbar 关闭

Material ui 对话框会随之关闭小吃栏。 这是一个奇怪的问题,所以我创建了一个演示来演示这个问题: https://codesandbox.io/s/react-hooks-counter-demo-v20w3 我正在将状态从父级传递给子级,以便父级状态可以根据子级进行更新 在
2回复

React Popover 组件 - Material UI

我正在尝试制作一个调色板,其功能如下:当我将鼠标悬停在PaletteIcon它应该会弹出调色板,我应该能够根据需要选择颜色。 但是当我尝试选择颜色时悬停后,调色板消失了。 是否有任何属性可以添加到纸质 React 组件或其他一些方法来实现这一点? 我检查了Paper API 文档,但没有找到任何解决
1回复

如何使用React Material UI在图标菜单中以编程方式打开对话框?

我有一个图标菜单,并且有一个数组,当我打开图标菜单时,该数组保存可能的值。 例如, 当我将初始值设置为1时,菜单中将显示标签ONE。 基于所选的值,我想显示一个对话框( http://www.material-ui.com/#/components/dialog )。 因此,当用户
1回复

从父组件打开材质 UI 对话框?

我需要从它们的父组件中打开两个单独的 Material UI 对话框(条款和隐私),这是一个 Material UI“简单菜单”。 我已经将它们导入并嵌套在父级中,我只是不知道如何让它们在单独的文件中从父级打开。 我在这个类似的问题上玩了太久,但无法让它发挥作用。 谢谢。 父组件(菜单): 子
1回复

Material UI Select 组件崩溃 React 应用程序

我正在尝试向我正在使用的 React 应用程序添加一个材质 ui 选择组件。 当我尝试向表单添加选择功能时,它崩溃了。 尽管使用了docs 中的确切示例,但我遇到了相同的错误和应用程序崩溃。 到目前为止,我已经尝试过: 修改 id 删除和更改各种道具,看看我是否可以确定导致错误的特定点(
1回复

使用 .map 函数设计 React Material UI 组件的样式

所以我有一系列 Material UI 组件(对于我的简化版本,我使用了两个简单的Button组件)。 当我在 map 函数中遍历这些组件时,如何向它们添加样式? 例如,我如何将图标的大小调整为 64px x 64px ?