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

Posted 2023-02-22

【中文标题】如何使 Material-UI Dialog 在 React 中工作

【英文标题】：How to make Material-UI Dialog work in 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>
    );
  

【参考方案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
>

---

在线试用：