如何使 Snackbar 在类组件中工作？

Posted 2023-02-22

【中文标题】如何使 Snackbar 在类组件中工作？

【英文标题】：How can I make the Snackbar work in a class component?

【发布时间】：2021-08-03 11:08:54

【问题描述】：

这些是我的小吃店代码，但每当我单击按钮时它都无法正常工作。我希望在单击“确认”按钮后出现小吃栏。几乎所有我看到的例子都在函数式组件中，那么如何才能让 Snackbar 在类组件中按预期工作呢？

class name extends Component 
  constructor() 
    super();
    this.state =  orders: [], open: false ;
  

  handleOpen = () => this.setState( open: true );

  handleClose = () => this.setState( open: false );

  columns = [
    
      name: "Confirm",
      options: 
        customBodyRender: (value, tableMeta) => 
          return (
            <FormControlLabel
              value=value
              control=
                <Button>
                  confirm
                </Button>
              
              onClick=(e) => 
                try 
                  //firestore codes
                  );
                 catch (err) 
                  console.log(err);
                
                this.handleOpen();
              
            />
          );
        ,
      ,
    ,

  ];

   //code for options

   //data fetching codes
  
  render() 
    const  open  = this.state;
    return this.state.orders ? (
      <div>
        //muidatatable codes
        <Snackbar
          anchorOrigin=
            vertical: "bottom",
            horizontal: "left",
          
          open=open
          onClose=this.handleClose
          autoHideDuration=2000
          // other Snackbar props
        >
          Order Confirmed
        </Snackbar>
      </div>
    ) : (
      <p>Loading...</p>
    );
  

【参考方案1】：

忽略一些语法错误，您应该通过使用长度来检查是否有任何订单，而不仅仅是通过数组的存在，因为您已经初始化了一个空数组 this.state.orders 将始终返回 true。而是使用 this.state.orders.length > 0 ？检查是否有订单。

Snackbar 的 child(ren) 应该封装在组件中，而不仅仅是直接使用字符串，直接使用字符串可以使用 Snackbar 的 message 属性。

此外，以大写字母开头的类名也是一个标准。

这是一个工作代码：Material UI Snackbar using classes

import React,  Component  from "react";
import  FormControlLabel, Button, Snackbar  from "@material-ui/core";
import MuiAlert from "@material-ui/lab/Alert";

export default class Name extends Component 
  constructor() 
    super();
    this.state =  orders: [], open: false ;
  

  handleOpen = () => this.setState( open: true );

  handleClose = () => this.setState( open: false );

  handleClick = () => this.setState( orders: [1], open: true );
  columns = [
    
      name: "Confirm",
      options: 
        customBodyRender: (value, tableMeta) => 
          return (
            <FormControlLabel
              value=value
              control=<Button>confirm</Button>
              onClick=(e) => 
                try 
                  //firestore codes
                 catch (err) 
                  console.log(err);
                
                this.handleOpen();
              
            />
          );
        
      
    
  ];

  //code for options

  //data fetching codes

  render() 
    const  open  = this.state;
    return (
      <>
        <Button variant="outlined" onClick=this.handleClick>
          Open snackbar
        </Button>
        this.state.orders.length > 0 ? (
          <div>
            <Snackbar
              anchorOrigin=
                vertical: "bottom",
                horizontal: "left"
              
              open=open
              onClose=this.handleClose
              autoHideDuration=2000
              // other Snackbar props
            >
              /* <span
                style=
                  background: "#000",
                  color: "#fff",
                  padding: "20px 5px",
                  width: "100%",
                  borderRadius: "5px"
                
              >
                Order Confirmed
              </span> */
              <MuiAlert
                onClose=this.handleClose
                severity="success"
                elevation=6
                variant="filled"
              >
                Success Message
              </MuiAlert>
            </Snackbar>
          </div>
        ) : (
          <p>loading...</p>
        )
      </>
    );
  

【讨论】：

谢谢，它确实有效。不过我还有一个问题，如何使用 material-ui 的 Alert 功能，以便使用将放在 Snackbar 中的 Alert 消息？

您可以像使用任何其他 jsx 元素一样简单地使用小吃栏中的警报。我已经更改了代码框（相同链接）中的代码，并在此处也编辑了代码。请确保包含 material-ui/labs，因为 MuiAlert (Alert) 不是核心的一部分。

【参考方案2】：

进行了以下更改以使其正常工作：

删除订单确认并使用message Snackbar 的道具 将值传递给constructor 中的订单数组 在 open 变量中传递 true。

下面是小吃店的工作代码。

import React,  Component  from "react";
import Snackbar from "@material-ui/core/Snackbar";

class SnackBarSof extends Component 
  constructor() 
    super();
    this.state =  orders: [1, 2], open: true ;
  

  handleOpen = () => this.setState( open: true );

  handleClose = () => this.setState( open: false );

  render() 
    console.log(this.state.orders);
    console.log(this.state);
    const  open  = this.state;
    return this.state.orders ? (
      <div>
        <Snackbar
          anchorOrigin=
            vertical: "bottom",
            horizontal: "left",
          
          open=open
          onClose=this.handleClose
          message="order confirmed"
          autoHideDuration=2000
        ></Snackbar>
      </div>
    ) : (
      <p>Loading...</p>
    );
  


export default SnackBarSof;