React Admin中如何为自定义表单执行自定义保存函数？

1. 在列表页添加自定义创建按钮 #

在项目List组件中，通过自定义工具栏添加“使用邮箱创建”按钮，点击时触发弹窗展示自定义表单：

import { List, Datagrid, TextField, CreateButton, Toolbar, Button, useRefresh } from 'react-admin';
import { Dialog, DialogTitle, DialogContent } from '@mui/material';
import { useState } from 'react';
import EmailCreateForm from './EmailCreateForm';

const CustomListToolbar = (props) => {
  const [open, setOpen] = useState(false);
  const refresh = useRefresh(); // 用于创建成功后刷新列表

  const handleClickOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleSuccess = () => {
    handleClose();
    refresh(); // 刷新列表展示新创建的项目
  };

  return (
    <Toolbar {...props}>
      <CreateButton /> {/* 保留原有默认创建按钮 */}
      <Button color="primary" onClick={handleClickOpen}>
        使用邮箱创建
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>通过邮箱创建项目</DialogTitle>
        <DialogContent>
          <EmailCreateForm onSuccess={handleSuccess} />
        </DialogContent>
      </Dialog>
    </Toolbar>
  );
};

export const ProjectList = () => (
  <List toolbar={<CustomListToolbar />}>
    <Datagrid>
      <TextField source="id" />
      <TextField source="name" />
      {/* 其他需要展示的字段 */}
    </Datagrid>
  </List>
);

2. 编写带自定义提交逻辑的表单组件 #

创建EmailCreateForm组件，完全绕过react-admin的数据提供器，直接调用你的自定义函数处理提交：

import { SimpleForm, TextInput, useForm } from 'react-admin';
import { useCallback } from 'react';

// 自定义创建逻辑，替换成你的业务代码
const customCreateWithEmail = async (formData) => {
  const response = await fetch('/your-custom-api-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 若需要权限验证，添加token等请求头
      // 'Authorization': `Bearer ${localStorage.getItem('token')}`
    },
    body: JSON.stringify(formData),
  });

  if (!response.ok) {
    const errorMsg = await response.text();
    throw new Error(errorMsg || '项目创建失败');
  }

  return response.json();
};

const EmailCreateForm = ({ onSuccess }) => {
  const { form } = useForm();

  const handleSubmit = useCallback(async (values) => {
    try {
      await customCreateWithEmail(values);
      form.reset();
      onSuccess();
      alert('项目创建成功');
    } catch (error) {
      alert(`创建失败：${error.message}`);
    }
  }, [form, onSuccess]);

  return (
    <SimpleForm onSubmit={handleSubmit}>
      <TextInput source="email" label="关联邮箱" required />
      <TextInput source="projectName" label="项目名称" required />
      {/* 其他需要的表单字段 */}
    </SimpleForm>
  );
};

export default EmailCreateForm;

3. 可选：完全自定义表单（不依赖react-admin表单组件） #

如果不需要react-admin表单的默认样式和逻辑，也可以自己实现原生表单：

import { TextField, Button } from '@mui/material';
import { useState } from 'react';

const customCreateWithEmail = async (formData) => {
  // 同上自定义逻辑
};

const EmailCreateForm = ({ onSuccess }) => {
  const [email, setEmail] = useState('');
  const [projectName, setProjectName] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await customCreateWithEmail({ email, projectName });
      setEmail('');
      setProjectName('');
      onSuccess();
      alert('项目创建成功');
    } catch (error) {
      alert(`创建失败：${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField
        label="关联邮箱"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        fullWidth
        margin="normal"
      />
      <TextField
        label="项目名称"
        value={projectName}
        onChange={(e) => setProjectName(e.target.value)}
        required
        fullWidth
        margin="normal"
      />
      <Button
        type="submit"
        color="primary"
        variant="contained"
        disabled={loading}
      >
        {loading ? '创建中...' : '确认创建'}
      </Button>
    </form>
  );
};

export default EmailCreateForm;

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