React Admin - 在 SimpleForm 上覆盖 handleSubmit答案

【问题标题】：React Admin - overiding handleSubmit on SimpleFormReact Admin - 在 SimpleForm 上覆盖 handleSubmit
【发布时间】：2020-10-02 12:01:10
【问题描述】：

我想要实现的是这个但使用 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 说：

最后，它接收一个handleSubmit函数作为prop，在用户提交表单时以更新的记录作为参数调用。

不幸的是，刚开始对此做出反应并没有给我任何线索，让我知道我应该怎么做才能让它发挥作用。

【问题讨论】：

您能否提供一个使用 SimpleForm 组件的示例？

标签： reactjs react-admin

【解决方案1】：

当您使用任何第三方库时，您需要遵守他们的规则。在这里，您使用的是 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。这就是为什么你需要将 props 传递给 <Create> 和 <Edit> 组件。

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

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

想了解更多详情请关注React Admin <Create> and <Edit> doc。

【讨论】：

谢谢，您上面的评论为我指明了我需要做什么的正确方向。将添加我找到的实际解决方案作为单独的答案。

【解决方案2】：

感谢Saswata Pal 的回答，我找到了我正在寻找的解决方案。为了达到我想要的效果，我更改了组件，如下所示：

<Create transform={transform}>

这让我可以在提交和修改之前获取表单结果。