如何使用 react-admin 的先前数据预填充创建表单上的某些字段？答案

【问题标题】：How to prefill certain fields on a create form using previous data with react-admin?如何使用 react-admin 的先前数据预填充创建表单上的某些字段？
【发布时间】：2020-01-22 09:57:33
【问题描述】：

我正在使用 react-admin(3.1.2) 并且我正在实现一个“保存并添加”按钮以允许批量创建，如 here 所述。

我正在尝试根据前一个表单的输入在下一个创建表单上预填充某些字段。我怎样才能做到这一点？

沙盒看看

我创建了一个code sandbox，请随意分叉它。预期的行为是当您单击“创建后”页面 (PostCreate.js) 上的“保存并添加”按钮时，使用先前的预告值预填充字段 teaser。

我的创建组件目前看起来像这样：

const PostCreateToolbar = props => (
  <Toolbar {...props}>
    <SaveButton
      label="post.action.save_and_edit"
      redirect="edit"
      submitOnEnter={true}
    />
    <SaveButton
      label="post.action.save_and_add"
      redirect={false}
      submitOnEnter={false}
      variant="text"
    />
  </Toolbar>
);

const PostCreate = ({ permissions, ...props }) => {
  return (
    <Create {...props}>
      <SimpleForm
        toolbar={<PostCreateToolbar />}
        validate={values => {
          const errors = {};
          ["title", "teaser"].forEach(field => {
            if (!values[field]) {
              errors[field] = "Required field";
            }
          });

          return errors;
        }}
      >
        <TextInput autoFocus source="title" />
        <TextInput source="teaser" fullWidth={true} multiline={true} />
      </SimpleForm>
    </Create>
  );
};

我尝试了什么

这个example 不符合我的需要，因为我需要在重定向到新表单之前先保存当前表单。

这个answer 也不起作用，因为我只需要预先填写一些字段（不是全部）。

我还尝试重定向到创建表单，在参数中传递字段以在 SaveButton 组件中使用 prop redirect="/posts/create?teaser=aa" 进行预填充，但随后新表单将填充 all 上一个表单中的数据.

对此的任何帮助将不胜感激。

非常感谢。

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

要在创建表单中预先填写一些字段，请在 url 中传递一个字符串化的 source 参数。你可以在SaveButtonredirect 函数中设置这个URL：

redirect={(redirectTo, basePath, is, data) => `/posts/create?source={"title":"${data.title}"}`}

【讨论】：

感谢您的意见。这个解决方案似乎有两个问题。首先，data.title 没有定义，其次，当重定向道具设置为与"false" 不同的东西时，提交表单后的状态仍然填充了前一个表单中的所有值。请参阅反映您的建议的code sandbox。

【解决方案2】：

我的两分钱：我发现如果我更改 props (props.record) 的 record 对象，我可以操纵我想要设置的字段的内容。

问题是 record 是只读的并且它是 null 所以我无法操纵它的属性。

我的解决方案是在<Create {...props}> 之前添加以下行：

const createProps = { ...props, record: { myProperty: 'myValue' } }

然后

<Create {...createProps}>

您可以设置record: {} 以便稍后在内部功能组件中进行操作，但请记住将函数的道具也传递给内部组件：

const myCreateComponent = props => {
       const createProps = { ...props, record: { myProperty: 'myValue (or a value you sent to this function along with props - (props, myObjectWithSomeValuesToUse) => ...thisFunction)' } }
       return (
          <Create {...createProps}>
              <MySimpleForm>
          </Create>
       )
};

const MySimpleForm = props => {
   props.record.myOtherProperty = 'myOtherValue'
   return (
       <SimpleForm {...props}>
          <TextInput source="myProperty"/>
          ...content
          <TextInput source="myOtherProperty"/>
       </SimpleForm>
   )
};

MySimpleForm 的

props 将在 record 对象 (props.record.myProperty) 中设置 myProperty 值，您设置的其他属性也将在那里，这一切都应该反映在 UI 和 Create 组件的 transform 函数的数据中

【讨论】：