javascript - 如何在 react-admin 中访问自定义组件中的表单数据?
问题描述
我需要根据表单的状态字段更改工具栏按钮的行为。我不知道如何访问当前表单数据以读取状态值。
我尝试使用FormDataConsumer
周围的组件(在我的情况下)并将 formData 作为道具传递,但这具有按钮内部Toolbar
不起作用的副作用。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>
);
更新:您可以在代码沙箱中看到一个示例:
解决方案
当前表单的字段值可以通过以下方式读取:
import { useForm } from 'react-final-form';
const form = useForm();
var formdata = form.getState().values;
formdata
包含作为对象的整个表单值。
推荐阅读
- javascript - 我的反应原生网站在使用 expo google 字体通过 https 加载时给出了多个混合内容警告
- xml - Schematron 规则失败 Pattern '' Failed : [123] 图片必填
- c++ - 比较二次函数的根
- ant - 在 Ant-Match Task 中,匹配一组 String 值
- excel - PowerQuery 的日计算未正确转换为 Excel 表
- ios - SCNView 在模拟器中使用 iPhone 6 上的 OpenGL,
- powershell - 如何提取有关 PowerShell 表中某个元素的特定信息
- ios - 如何获取数组中的所有标题?
- jquery - 如何使用 jquery 将图像上传到控制器 - Laravel
- bash - 在 bash 脚本的正则表达式上提取 json 值