如何讓 Material-UI Dialog 在 React 中工作

Question

我正在為我的項目使用 material-UI，我想使用 Dialog 但 Dialog 無法正常工作而沒有任何錯誤。 我正在使用與材料設計的反應。 我嘗試了很多東西，但仍然無法正常工作。 我正在使用與材料設計的反應。 我想在對話框中打開表單。

應用程序.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;

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

Answer 1

1. 您沒有將處理程序函數handleToggle綁定到按鈕。

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

2. 您需要一個onClose回調處理程序來關閉對話框，而且您似乎可以與onClick共享相同的處理程序。

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

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

---

在線試一下：