如何使 Material-UI Dialog 在 React 中工作答案

【问题标题】：How to make Material-UI Dialog work in React如何使 Material-UI Dialog 在 React 中工作
【发布时间】：2020-06-28 10:31:54
【问题描述】：

我正在为我的项目使用 material-UI，并且我想使用 Dialog 但 Dialog 无法正常工作且没有任何错误。我正在使用材料设计的反应。我尝试了很多事情，但仍然无法正常工作。我正在使用材料设计的反应。我想在对话框中打开表单。

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;

Signup.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>
    );
  }
}

【问题讨论】：

标签： javascript html reactjs react-redux material-ui

【解决方案1】：

您没有将处理函数handleToggle 绑定到按钮。

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

您需要一个onClose 回调处理程序来关闭对话框，而且您似乎可以与onClick 共享同一个处理程序。

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

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

在线试用：

【讨论】：