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

这些是我的snackbar代码，每当我点击按钮时，它都不起作用。我希望snackbar出现一次，我将单击按钮“确认”。我看到的几乎所有示例都在功能组件中，那么如何使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>
    );
  }

类名扩展组件{
构造函数（）{
超级（）；
this.state={orders:[]，open:false}；
}
handleOpen=（）=>this.setState（{open:true}）；
handleClose=（）=>this.setState（{open:false}）；
列=[
{
名称：“确认”，
选项：{
customBodyRender：（值，tableMeta）=>{
返回(
{
试一试{
//火库代码
);
}捕捉（错误）{
控制台日志（err）；
}
这个；
}}
/>
);
},
},
},
];
//选项代码
//数据获取代码
render（）{
const{open}=this.state；
还这个，州政府的命令(
//可数编码
订单确认
) : (
加载

);
}

---

}

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

• 已删除确认的订单并使用了

  Snackbar的
  消息
  道具

• 将值传递给构造函数中的orders数组
• 在

  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;

import React，{Component}来自“React”；
从“@material ui/core/Snackbar”导入Snackbar；
类SnackBarSof扩展组件{
构造函数（）{
超级（）；
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；
还这个，州政府的命令(
) : (
加载

);
}
}
导出默认SnackBarSof；

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

Snackbar的子元素（ren）应该被包装在组件中，而不仅仅是直接使用字符串，因为直接使用字符串可以使用Snackbar的消息属性

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

下面是一个工作代码：

import React，{Component}来自“React”；
从“@material ui/core”导入{FormControlLabel，Button，Snackbar}；
从“@material ui/lab/Alert”导入MuiAlert；
导出默认类名扩展组件{
构造函数（）{
超级（）；
this.state={orders:[]，open:false}；
}
handleOpen=（）=>this.setState（{open:true}）；
handleClose=（）=>this.setState（{open:false}）；
handleClick=（）=>this.setState（{orders:[1]，open:true}）；
列=[
{
名称：“确认”，
选项：{
customBodyRender：（值，tableMeta）=>{
返回(
{
试一试{
//火库代码
}捕捉（错误）{
控制台日志（err）；
}
这个；
}}
/>
);
}
}
}
];
//选项代码
//数据获取代码
render（）{
const{open}=this.state；
返回(
开放式弹簧撑杆
{this.state.orders.length>0(
{/* 
订单确认
*/}
成功信息
) : (
加载

)}
);
}
}

谢谢，它确实有效。不过我还有一个问题，我如何使用material ui的Alert函数，以便使用一条将放在Snackbar中的警报消息？您可以简单地使用Snackbar中的警报，就像使用任何其他jsx元素一样。我已经在codesandbox（相同的链接）中更改了代码，并在这里编辑了代码。请确保包括材料ui/实验室，因为MuiAlert（警报）不是核心的一部分。

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>
        )}
      </>
    );
  }
}