如何制作带submit确认按钮的可复用Dialog/Modal弹窗组件

核心改造说明 #

要实现可复用的表单确认弹窗，需要将组件内部可变的属性和控制逻辑抽离到父组件，核心调整点如下：

• 移除组件内部的弹窗状态维护，将open显示状态、onClose关闭方法交由父组件控制，适配不同业务的触发逻辑
• 抽离弹窗标题、内容、按钮文案为可配置参数，支持不同场景的文案自定义
• 确认按钮默认设置type="submit"，既可以直接嵌入表单触发原生提交逻辑，也可以绑定自定义提交回调
• 保留原Material UI组件的无障碍属性，符合可用性规范

完整可复用组件代码 #

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import PropTypes from 'prop-types';

export default function ConfirmDialog(props) {
  const { 
    open, 
    onClose, 
    title, 
    content, 
    confirmText = "确认", 
    cancelText = "取消",
    onConfirm
  } = props;

  const handleConfirm = () => {
    onConfirm?.();
    onClose();
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="confirm-dialog-title"
      aria-describedby="confirm-dialog-description"
    >
      <DialogTitle id="confirm-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="confirm-dialog-description">
          {content}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          {cancelText}
        </Button>
        <Button 
          type="submit" 
          onClick={handleConfirm} 
          color="primary" 
          autoFocus
        >
          {confirmText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

ConfirmDialog.propTypes = {
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired,
  confirmText: PropTypes.string,
  cancelText: PropTypes.string,
  onConfirm: PropTypes.func
};

表单场景使用示例 #

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import ConfirmDialog from './ConfirmDialog';

export default function FormSubmitPage() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [formData, setFormData] = useState({
    username: '',
    contact: ''
  });

  const handleInputChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  // 表单提交前触发，校验通过后打开确认弹窗
  const handlePreSubmit = (e) => {
    e.preventDefault();
    // 此处可添加表单校验逻辑
    if (!formData.username || !formData.contact) {
      alert('请填写完整信息');
      return;
    }
    setDialogOpen(true);
  };

  // 用户确认后执行实际提交逻辑
  const handleConfirmSubmit = () => {
    console.log('提交表单数据:', formData);
    // 此处添加接口请求等提交逻辑
  };

  return (
    <div style={{ maxWidth: 500, margin: '30px auto' }}>
      <form onSubmit={handlePreSubmit}>
        <TextField
          fullWidth
          label="用户名"
          name="username"
          value={formData.username}
          onChange={handleInputChange}
          margin="normal"
        />
        <TextField
          fullWidth
          label="联系方式"
          name="contact"
          value={formData.contact}
          onChange={handleInputChange}
          margin="normal"
        />
        <Button 
          type="submit" 
          variant="contained" 
          color="primary" 
          style={{ marginTop: 20 }}
        >
          提交
        </Button>

        {/* 确认弹窗 */}
        <ConfirmDialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          title="确认提交信息"
          content="请确认你填写的信息准确无误，提交后将无法修改，是否确认提交？"
          onConfirm={handleConfirmSubmit}
        />
      </form>
    </div>
  );
}

补充说明 #

如果不需要额外的提交回调逻辑，直接使用原生form提交能力，可以将ConfirmDialog组件放在form标签内部，点击确认按钮会自动触发form的提交事件，无需额外绑定onConfirm参数。

内容的提问来源于stack exchange，提问作者JS3