如何在 react-admin 中访问自定义组件中的表单数据?

Question

我需要根据表单的状态字段更改工具栏按钮的行为。 我不知道如何访问当前表单数据以读取状态值。

我尝试在周围的组件中使用FormDataConsumer(在我的情况下Toolbar(并将formData作为道具传递，但这会产生副作用，即按钮内部的handleSubmitWithRedirect不起作用。

我想直接在按钮组件中读取表单数据。我该怎么做？

当前代码：

// ------------------------------------------------------------------------------------------
const StatusButton= ({ handleSubmitWithRedirect, ...props }) => {
const form = useForm();
const handleClick = useCallback(() => {
switch (props.formdata.status.id) {   
case 0:
form.change('status', status[1]);
break;
case 1:
form.change('status', status[2]);
break;
default:
}
handleSubmitWithRedirect('list');
}, [form]);
return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
};
// ------------------------------------------------------------------------------------------
export const MyToolbar= props => (
<Toolbar {...props} >
<SaveButton
label="Speichern"
redirect="list"
submitOnEnter={true}
variant="text"
/>
<FormDataConsumer>
{({ formData, ...rest }) =>
<StatusButton
label="Statuswechsel"
redirect="list"
submitOnEnter={false}
variant="text"
formdata={formData}  
/>
}
</FormDataConsumer>
</Toolbar>
);

更新： 您可以在 CodeSandbox 中看到一个示例：

https://codesandbox.io/s/react-admin-accessformdata-v0uq7?fontsize=14&hidenavigation=1&initialpath=%23%2Fposts%2F1%2Fshow&module=%2Fsrc%2Fposts%2FPostShow.js&theme=dark

Answer 1

可以通过以下方式读取当前表单的字段值：

import { useForm } from 'react-final-form';
const form = useForm();
var formdata = form.getState().values;

formdata包含整个表单值作为对象。