当 SimpleForm 在 react-admin 应用程序中无效时如何禁用 SaveButton？答案

【问题标题】：How to disable the SaveButton when the SimpleForm is invalid in a react-admin app?当 SimpleForm 在 react-admin 应用程序中无效时如何禁用 SaveButton？
【发布时间】：2018-06-18 14:06:12
【问题描述】：

当我单击保存按钮时，在 react-admin SimpleForm 组件验证工作正常。当我单击保存按钮时，必填字段突出显示并标记为红色。

只要表单无效，我想向SaveButton 添加一个类名。这样我就可以让用户清楚地知道他还没有完成表单并阻止用户点击它。

这是这种 SimpleForm 的简化版本。

import {
    required,
    //...
} from 'react-admin';

const UserCreateToolbar = props =>
    <Toolbar {...props}>
        <SaveButton
            label="user.action.save_and_show"
            redirect="show"
            submitOnEnter={true}
        />
    </Toolbar>;

export const UserCreate = props =>
    <Create {...props}>
        <SimpleForm
            toolbar={<UserCreateToolbar />}
        >
            <TextInput source="name" validate={[required()]} />
        </SimpleForm>
    </Create>;

【问题讨论】：

标签： forms validation admin-on-rest react-admin

【解决方案1】：

您可以创建自己的SaveButton 组件，连接到redux，它将从状态（查看redux-form 文档）获取在react-admin 中始终命名为record-form 的表单的验证状态。

然后，您可以在按钮上应用 disabled 属性并最终调整其样式

【讨论】：

【解决方案2】：

这是我自己想出的 SaveButton 组件。它对我有用。感谢@Gildas 为我指明了正确的方向。

import React from 'react';
import PropTypes from 'prop-types';
import { reduxForm } from 'redux-form';
import { SaveButton } from 'react-admin';

const SaveButtonAware = ({ invalid, ...rest }) => (
    <SaveButton disabled={invalid} {...rest} />
);

SaveButtonAware.propTypes = {
    invalid: PropTypes.bool,
};

export default reduxForm({
    form: 'record-form',
})(SaveButtonAware);

更新。显然，这也有效。不知道为什么。

import React from 'react';
import PropTypes from 'prop-types';
import { SaveButton } from 'react-admin';

const SaveButtonAware = ({ invalid, ...rest }) => (
    <SaveButton disabled={invalid} {...rest} />
);

SaveButtonAware.propTypes = {
    invalid: PropTypes.bool,
};

export default SaveButtonAware;

【讨论】：

那是因为我们确实将 invalid 在 props 中传递给了 toolbar，它应该将它传递给它的按钮。我忘了...这是正确的答案。谢谢！
原始道具@GildasGarcia 怎么样？即在表单未更改时（以及表单数据无效时）保持禁用保存按钮
是的，从 reacts final form 提供的 useForm 钩子中获取表单状态。我们在钩子可用之前通过了其中一些，但这很快就会成为标准方式

【解决方案3】：

您应该首先创建一个自定义工具栏，并将保存按钮的禁用元素设置为工具栏无效状态，如下所示。（工具栏总是有表单的状态）

import * as React from "react";
import {
  Toolbar,
  SaveButton
} from 'react-admin';

const CustomToolbar = (props) => (
  <Toolbar {...props}>
    <SaveButton disabled={props.invalid}/>
  </Toolbar>
);

导出默认自定义工具栏；

然后在您的表单中使用此自定义工具栏，如下所示：

<SimpleForm redirect="list" toolbar={<CustomToolbar/>}>
    {your form elements}
</SimpleForm>

【讨论】：