forms - 当React-admin应用中的SimpleForm无效时，如何禁用SaveButton？

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

只要表单无效，我想将className添加到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>;

最佳答案

这是我自己想到的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;