React Admin-在SimpleForm上覆盖handleSubmit

如何解决React Admin-在SimpleForm上覆盖handleSubmit

我要实现的是，但是使用react admin SimpleForm而不是Form：

import React,{ useState } from "react";

export function NameForm(props) {
  const [name,setName] = useState("");
  
  const handleSubmit = (evt) => {
      evt.preventDefault();
      alert(`Submitting Name ${name}`)
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Frirst Name:
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

当我尝试相同的模式时，即：

<SimpleForm onSubmit={handleSubmit}>

它永远不会到达handleSubmit函数。我也尝试过：

<SimpleForm handleSubmit={handleSubmit}>

但再次没有喜悦。

React管理员文档here说：

最后，它接收prop的handleSubmit函数，当用户提交表单时，将使用更新的记录作为参数来调用。

不幸的是，刚开始对此做出反应并没有给我任何让我知道如何使它起作用的线索。

解决方法

在使用任何第三方库时，您需要遵循他们的规则。在这里，您使用的是React管理员库，该库支持普通的管理员功能，例如添加/编辑/列表等。只需花费很少的精力，您就可以创建管理员面板。

因此，当您专注于使用React Admin创建表单时，可以创建添加/编辑表单。

在您的App.js中，您需要首先使用包含创建和编辑属性的Resource定义路由。在创建/编辑中，您可以导入添加/编辑组件并传递它。下面给出示例。您可以看到还提供了dataProvider链接。当您创建编辑表单时，它将从那里获取数据

// in src/App.js
import * as React from "react";
import { Admin,Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

import { PostCreate,PostEdit } from './posts';

const App = () => (
    <Admin dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        <Resource name="posts" create={PostCreate} edit={PostEdit} />
    </Admin>
);

export default App;

创建正确的路由后，您可以转到组件并创建添加/编辑表单，如下所示

// in src/posts.js
import * as React from "react";
import { Create,Edit,SimpleForm,TextInput,DateInput,ReferenceManyField,Datagrid,TextField,DateField,EditButton } from 'react-admin';
import RichTextInput from 'ra-input-rich-text';

export const PostCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" options={{ multiLine: true }} />
            <RichTextInput source="body" />
            <DateInput label="Publication date" source="published_at" defaultValue={new Date()} />
        </SimpleForm>
    </Create>
);

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput disabled label="Id" source="id" />
            <TextInput source="title" validate={required()} />
            <TextInput multiline source="teaser" validate={required()} />
            <RichTextInput source="body" validate={required()} />
            <DateInput label="Publication date" source="published_at" />
            <ReferenceManyField label="Comments" reference="comments" target="post_id">
                <Datagrid>
                    <TextField source="body" />
                    <DateField source="created_at" />
                    <EditButton />
                </Datagrid>
            </ReferenceManyField>
        </SimpleForm>
    </Edit>
);

React-admin为创建和编辑视图注入了一些道具：资源名称，basePath（根URL），权限以及（对于编辑视图而言）记录ID。这就是为什么您需要将道具传递到<Create>和<Edit>组件的原因。

<Create>和<Edit>组件调用dataProvider，准备表单提交处理程序，并呈现页面标题和操作。

<SimpleForm>您在问题中提到的仅负责创建表单，不负责handleSubmit操作，<Create>和<Edit>组件负责处理。

要详细了解更多信息，请仔细遵循React Admin <Create> and <Edit> doc。

因此，由于Saswata Pal的回答，我找到了所需的解决方案。为了达到我想要的效果，我更改了组件，就像这样：

<Create transform={transform}>

这使我能够在提交和修改之前获取表单结果。