如何让我的自定义工具栏按钮在 react-admin 中使用表单的验证功能？

Question

我创建了一个带有自定义工具栏按钮的自定义Toolbar。这个自定义按钮的作用应该像标准的SaveButton，但应该在提交表单后做额外的工作。只有在验证通过的情况下才能提交表单。如果没有，则应标记未通过的字段。

简而言之，我的自定义按钮应该像内置的SaveButton一样，但让我在提交后做一些额外的事情。

不幸的是，表单的验证函数没有被调用，并且根据invalid标志，表单总是无效的。我做错了什么？

这就是我实现自定义按钮的方式：

const ActionButton = ({ handleSubmitWithRedirect, ...props }) => {
const form = useForm();
var formdata = form.getState().values;
const handleClick = useCallback(() => {
// Validation function of the form is NOT called, the form is always invalid... why?
if (!props.invalid) {
doSomeExtraStuff();
handleSubmitWithRedirect('list');
} else alert("Invalid!");
}, [formdata, form]);
return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
};

我的Toolbar函数类似于：

export const MyCustomToolbar = props => (
<Toolbar {...props} >
<SaveButton
label="Save"
redirect="list"
submitOnEnter={true}
variant="outline"
/>
<ActionButton
label="Save and do extra stuff"
redirect="edit"
submitOnEnter={false}
variant="text"
/>
</Toolbar>
);

Answer 1

请参阅内联注释。这将调用字段的验证，然后提交到自定义路由。在"成功"时刷新页面并发出通知。

创建表单

<Create
title=" "
basePath={basePath}
resource={`yourapi/path/${record.id}`} //custom route -magic happens here
successMessage="Successfully Saved"
>
<SimpleForm
validate={validateFormFunction}  //global - validate your inputs here
toolbar={<SaveListFormToolBar />}
>
//form fields go here
</SimpleForm>
</Create>

SaveButton

const SaveListFormToolBar = (props) => {
//you could do your prevalidation here 
console.log(props);
return (
<Toolbar {...props}>
<SaveButton
label="Save List"
redirect={false}  //refreshes the page
submitOnEnter={false}
variant="contained"
color="secondary"
icon={<SaveIcon />}  //or any other icon from material UI icons
/>
</Toolbar>
);
};