reactjs - react / Material UI 对话框 : how to close a dialogue

Question

我正在尝试在 React 和 Material UI 中创建一个简单的确认对话。我已经打开它以响应提交表单。但是，当我尝试在对话框中创建一个将关闭它的按钮时，单击该按钮时没有任何反应。我将打开状态绑定(bind)到一个属性，以便可以从父/包含模块中的代码打开对话框。如果有更好的方法，我会洗耳恭听。

这是我的组件代码:

import React, { Component } from 'react';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';

class ResponseDialog extends Component
{
    constructor(props) {
      super(props);
      console.log(this.props);

      this.closeDialog = this.closeDialog.bind(this);
    }

    closeDialog ()
    {
        this.props.open = false;
    }


    render()
    {
        return(
            <div>
                <Dialog  open={this.props.open}>
                      <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
                      <button onClick = {this.closeDialogue}>OK</button>
                  </Dialog>
            </div>
        )};
}

export default ResponseDialog;

Answer 1

使用功能组件:

import DialogTitle from '@material-ui/core/DialogTitle'
import Dialog from '@material-ui/core/Dialog'
import { useState } from 'react'

const App = () => {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setOpen(!open)}>OK</button>
      <header className='App-header'>
        <Dialog open={open}>
          <DialogTitle id='simple-dialog-title'>Set backup account</DialogTitle>
          <button onClick={() => setOpen(!open)}>OK</button>
        </Dialog>
      </header>
    </div>
  )
}

export default App

使用类组件:

import './App.css'
import DialogTitle from '@material-ui/core/DialogTitle'
import Dialog from '@material-ui/core/Dialog'
import { Component } from 'react'

class App extends Component {
  // There is no need of the constructor, as long as you use arrow => functions
  // Just declare the state like this
  state = {
    open: false,
  }

  render() {
    return (
      <div className='App'>
        <button onClick={() => this.setState({ open: !this.state.open })}>
          Open
        </button>

        <header className='App-header'>
          <Dialog open={this.state.open}>
            <DialogTitle id='simple-dialog-title'>
              Set backup account
            </DialogTitle>
            <button onClick={() => this.setState({ open: !this.state.open })}>
              OK
            </button>
          </Dialog>
        </header>
      </div>
    )
  }
}
export default App