如何允许对话框显示内容，以及单击后如何进行编辑。将2个对话框合并为1个？

Question

我会弹出一个对话框，用户可以输入标题和描述。

如何使用此对话框或基于此的对话框来允许用户编辑标题和描述？我应该只创建1个同时进行新建和编辑的对话框吗？

基本上，如果有人单击标题或描述，我希望它成为TextField，以便他们可以编辑文本。

我的不可编辑对话框是：

      <Dialog
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby="form-dialog-title"
        fullWidth={true}
        maxWidth={'md'}
      >
        <DialogTitle id="form-dialog-title">{card.title}</DialogTitle>
        <DialogContent>
          <DialogContentText>
            {card.description}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={this.handleClose} color="primary">
            Close
          </Button>
          <Button onClick={this.create} color="primary">
            Save
          </Button>
        </DialogActions>
      </Dialog>

下面的对话框用于创建新卡：

<Dialog
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
        >
  <DialogTitle id="form-dialog-title">New Card</DialogTitle>
  <DialogContent>
    <DialogContentText>
      Enter the card details
    </DialogContentText>
    <TextField
      autoFocus
      margin="dense"
      id="cardTitle"
      label="Title"
      type="text"
      fullWidth
      onChange={this.changeCardTitle}
    />
      <TextField
      autoFocus
      margin="dense"
      id="cardBody"
      label="Description"
      type="text"
      fullWidth
      onChange={this.changeCardBody}
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={this.handleClose} color="primary">
      Cancel
    </Button>   
    <Button onClick={this.create} color="primary">
      Save
    </Button>
  </DialogActions>
</Dialog>