如何解决实质性的UI快餐栏在Next JS中无法正常工作
我正在尝试在NextJS中使用Material UI组件,但是它们无法正常工作。
import React,{ Component } from "react";
// MATERIAL
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
export default class NewProduct extends Component {
constructor() {
super();
this.state = {
testSnack: false,};
}
testSnackbars = () => {
this.setState({ testSnack: true });
};
render(){
return{
<>
<Snackbar
open={this.state.testSnack}
autoHideDuration={5000}
onClose={this.handleClose}
>
<MuiAlert
elevation={6}
variant="filled"
onClose={this.handleClose}
severity="success"
>
Product Added!
</MuiAlert>
</Snackbar>
<button onClick={this.testSnackbars}>
Save
</button>
</>
}
}
}
这是在单击按钮时显示小吃栏的简单逻辑,但这在NextJs中似乎不起作用,我在ReactJs中非常频繁地使用Material,但这从未发生过。有人可以告诉我我在做什么错吗?
我无法使用自己的状态运行小吃店。如果我传入open = {true}属性,它将显示出来,但无法通过状态变量进行操作。
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。