React Admin：创建/编辑视图中的动态成功消息答案

【问题标题】：React Admin: Dynamic SuccessMessage in Create/Edit ViewsReact Admin：创建/编辑视图中的动态成功消息
【发布时间】：2020-05-14 02:01:37
【问题描述】：

我正在使用react-admin 框架，并尝试根据父视图SimpleForm 中的子输入值从Create/Edit 视图发送动态successMessage。

现在GetSuccessMsg() 在渲染时被调用一次，并且只是将初始值传递给通知面板。这是我当前的代码。

export const UserCreation = ({ userId, timezone, ...props }) => {
  var SuccessMsg = "Account Created. Email sent to complete account setup."
  const ValidateUserCreation = (values) => {
    SuccessMsg = values 
      ? "Account Created. Email sent to complete account setup." 
      : "Account Created"
    return undefined
  };

  const GetSuccessMsg = () => { return SuccessMsg }

  return (
    <Create {...props} successMessage={GetSuccessMsg()}>
      <SimpleForm toolbar={<WithPracticeToolbar many />}>
        <TextInput source="name" />
        <TextInput source="phone" />
        <TextInput source="email" />
        <TimezoneDropDown source="timezone" />
        <BooleanInput
          validate={ValidateUserCreation}
          label="Create login account for this member"
          source="createMemberLogin"
          defaultValue
        />
      </SimpleForm>
     </Create>
   )
};

我正在寻找任何合理的方法来在更改子输入时更新successMessage 道具（传递给Create）。

提前感谢您的帮助！

【问题讨论】：

GetSuccessMsg() 会立即调用该函数，而GetSuccessMsg 只会在需要时触发。

标签： javascript reactjs react-admin

【解决方案1】：

你可以尝试做这样的事情。进一步认为您会在https://marmelab.com/react-admin/Inputs.html上找到详细信息

import { useForm } from 'react-final-form';

export const UserCreation = ({ userId, timezone, ...props }) => {

var SuccessMsg = "Account Created. Email sent to complete account setup."

const ValidateUserCreation = ({ formData, ...rest }) => {
    // here think you will hava acces to the formData values
    SuccessMsg = formData ? `Account Created. Email sent to ${formData.email} to complete account setup.` : "Account Created"
    return undefined
};

const GetSuccessMsg = () =>{
    return SuccessMsg 
}

return (
  <Create {...props} successMessage={GetSuccessMsg()}>
    <SimpleForm toolbar={<WithPracticeToolbar many />}>
      <FormDataConsumer>
        <TextInput source="name" />
        <TextInput source="phone" />
        <TextInput source="email" />
        <TimezoneDropDown source="timezone" />
        {formDataProps => (
          <BooleanInput
            validate={ValidateUserCreation(formDataProps)}
            label="Create login account for this member"
            source="createMemberLogin"
            defaultValue/>
         )}

      <FormDataConsumer>
    </SimpleForm>
  </Create>
)
};

【讨论】：