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

【问题标题】：How to access form data in custom components in react-admin?如何在 react-admin 中访问自定义组件中的表单数据？
【发布时间】：2020-05-20 00:23:38
【问题描述】：

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

我尝试在周围的组件中使用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>
);

更新：您可以在代码沙箱中看到一个示例：

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

【问题讨论】：

不确定意图...useForm 和做同样的事情，带来上下文...对于useForm 你得到form - 来自文档 - 允许 API 访问.. . 那么看起来应该是form.getStatus().values ?
'status' 是一个自定义表单字段，在我的例子中包含一个 id-name 元组对象。我在文档中找不到任何提示如何使用“表单”访问表单数据。
form.getStatus().values.status ? .... 将form.getStatus() 放入某个 var 并使用调试器/开发工具进行检查？ ....准备minimal reproducible example
目的是检查当前的工作流程步骤（在我的例子中称为状态），而不是表单的技术状态
没有form.getStatus()

标签： javascript reactjs react-admin react-final-form

【解决方案1】：

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

import { useForm } from 'react-final-form';

const form = useForm();
var formdata = form.getState().values;

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

【讨论】：