Как заставить Material-UI Dialog работать в React

Question

Я использую интерфейс материалов для своего проекта и хочу использовать диалог, но диалог не работает без каких-либо ошибок. Я использую реакцию с материальным дизайном. Я пробую много вещей, но все еще не работаю. Я использую реагирование с дизайном материала. Я хочу открыть форму в диалоге.

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;

Регистрация .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>

Вам нужен обработчик обратного вызова onClose, чтобы закрыть диалоговое окно, и, похоже, вы можете использовать тот же обработчик совместно с onClick.

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

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

---

Попробуйте онлайн: