如何在 react-admin 中访问自定义组件中的表单数据?
How to access form data in custom components in react-admin?
我需要根据表单的状态字段更改工具栏按钮的行为。
我不知道如何访问当前表单数据以读取状态值。
我尝试在周围的组件中使用 FormDataConsumer
(在我的例子中是 Toolbar
)并将 formData 作为 prop 传递,但这有按钮内部的 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中看到一个例子:
当前表单的字段值可以读取访问:
import { useForm } from 'react-final-form';
const form = useForm();
var formdata = form.getState().values;
formdata
包含作为对象的整个表单值。
我需要根据表单的状态字段更改工具栏按钮的行为。 我不知道如何访问当前表单数据以读取状态值。
我尝试在周围的组件中使用 FormDataConsumer
(在我的例子中是 Toolbar
)并将 formData 作为 prop 传递,但这有按钮内部的 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中看到一个例子:
当前表单的字段值可以读取访问:
import { useForm } from 'react-final-form';
const form = useForm();
var formdata = form.getState().values;
formdata
包含作为对象的整个表单值。