Javascript 如何使“材质UI”对话框在React中工作

我正在为我的项目使用材质UI，我想使用Dialog，但Dialog无法正常工作。我正在使用react进行材料设计。我尝试了很多东西，但仍然不起作用。我正在使用react with material design。我想在对话框中打开表单。

App.tsx

import React from "react";
import logo from "./logo.svg";
import "./style.scss";
import {
  Button,
  FormControl,
  TextField,
  Grid,
  Container
} from "@material-ui/core";
import CreateDialog from "./Components/UserLoginSignUp/Signup";

function App() {
  return (
    <Container>
      <div className="App">
        <CreateDialog />
        sdfsdf
      </div>
    </Container>
  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/style.scss”；
进口{
按钮
FormControl，
TextField，
网格，
容器
}来自“@材料界面/核心”；
从“/Components/UserLoginSignUp/Signup”导入CreateDialog；
函数App（）{
返回(
sdfsdf
);
}
导出默认应用程序；

注册。tsx

import React, { Fragment } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from "@material-ui/core";
import { FormControl, TextField, Grid, Container } from "@material-ui/core";
import { Component } from "react";

export default class extends Component {
  state = {
    open: false
  };
  handleToggle = () => {
    this.setState({
      open: !this.state.open
    });
  };
  render() {
    const { open } = this.state;
    return (
      <Fragment>
        <Button>add</Button>
        <Dialog aria-labelledby="form-dialog-title" open={open}>
          <DialogTitle id="form-dialog-title">Set backup account</DialogTitle>
          <DialogContent>
            <DialogContentText>form</DialogContentText>
            <Grid container spacing={3}>
              <Grid item xs={12} sm={6} id="content_side_userLS">
                <Grid>
                  {" "}
                  <h1>Signup</h1>
                  <p>
                    Invest with next-generation wealth building & investment
                    platform.
                  </p>
                </Grid>
              </Grid>
              <Grid item xs={12} sm={6}>
                <form noValidate autoComplete="off">
                  <FormControl className="input_field" fullWidth>
                    <TextField id="standard-basic" label="Full Name" />
                  </FormControl>
                  <FormControl className="input_field" fullWidth>
                    <TextField
                      id="standard-basic"
                      label="Enter Email/Mobile Number"
                    />
                  </FormControl>
                  <FormControl className="input_field" fullWidth>
                    {" "}
                    <TextField id="standard-basic" label="Password" />
                  </FormControl>
                  <FormControl className="input_field" fullWidth>
                    {" "}
                    <Button variant="contained" color="primary">
                      {" "}
                      CONTINUE{" "}
                    </Button>
                  </FormControl>
                </form>
              </Grid>
            </Grid>
          </DialogContent>
          <DialogActions>
            <Button>Subscribe</Button>
          </DialogActions>
        </Dialog>
      </Fragment>
    );
  }
}

import React，{Fragment}来自“React”；
进口{
按钮
对话
对话行动，
对话内容，
对话内容文本，
对话标题
}来自“@材料界面/核心”；
从“@material ui/core”导入{FormControl，TextField，Grid，Container}”；
从“react”导入{Component}；
导出默认类扩展组件{
状态={
开放：假
};
handleToggle=（）=>{
这是我的国家({
打开：！this.state.open
});
};
render（）{
const{open}=this.state；
返回(
添加
设置备份帐户
形式
{" "}
报名

投资新一代财富建设和投资
站台。

{" "}
{" "}
{" "}
继续{“}
订阅
);
}
}

您没有将处理程序函数

handleToggle

绑定到按钮

---

在线试用：

您没有将处理程序函数

handleToggle

绑定到按钮

---

在线试用：

<Button onClick={this.handleToggle}>add</Button>

handler = () => {
  this.setState({
    open: !this.state.open
  });
};

<Dialog
  aria-labelledby="form-dialog-title"
  open={open}
  onClose={this.handler}
>