在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>;
您可以创建自己的
SaveButton
组件,连接到redux,它将从状态中获取表单的验证状态(检查redux-form文档),该表单在react-admin中始终名为record-form
。
然后,您可以在按钮上应用
disabled
属性并最终调整其样式
这是我自己想出的 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;
您应该首先创建一个自定义工具栏,并将“保存”按钮的禁用元素设置为“工具栏无效”状态,如下所示。 (工具栏始终处于表单状态)
import * as React from "react";
import {
Toolbar,
SaveButton
} from 'react-admin';
const CustomToolbar = (props) => (
<Toolbar {...props}>
<SaveButton disabled={props.invalid}/>
</Toolbar>
);
导出默认的CustomToolbar;
然后在您的表单中使用此自定义工具栏,如下所示:
<SimpleForm redirect="list" toolbar={<CustomToolbar/>}>
{your form elements}
</SimpleForm>