在 react-admin 中显示编辑后的值
Show edited value in aside in react-admin
我正在使用 react-admin 作为管理界面。除了编辑表单,我想显示编辑后的值(只是为了了解如何捕获表单更改的值,稍后将显示来自 api 的数据以获取这些更改的值)。我的代码如下(简体)
const Aside = ({ record }) => {
return (
<div style={{ width: 200, margin: '1em' }}>
<Typography variant="h6">Student details</Typography>
<Typography variant="body2">
{record && (
<Typography variant="body2">
{//Will Show current ArrayInput values here, Name/role of current students}
</Typography>
)}
</Typography>
</div>
)};
export const MyEdit = (props) => (
<Edit aside={<Aside />} {...props}>
<SimpleForm>
<ArrayInput source="students">
<SimpleFormIterator>
<TextInput source="name" /
<NumberInput source="role" />
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
如何在 ArrayInput 值发生变化时更新?
React-admin 使用 react-final-form,后者又使用 react Context 来存储当前表单值。
这意味着您无法从表单外部访问这些值(我在旁边是在表单之外)。
解决方案是将当前表单值存储在由 SimpleForm 和 Aside 共享的状态中(甚至在 Redux 存储中)。为此,请在表单中使用 FormSpy,这将在值更改时更新共享状态。
// in MyEdit.js
export const MyEdit = (props) => {
const [formValues, setFormValues] = useState();
return (
<Edit aside={<Aside formValues={formValues} />} {...props}>
<SimpleForm>
<ArrayInput source="students">
<SimpleFormIterator>
<TextInput source="name" /
<NumberInput source="role" />
</SimpleFormIterator>
</ArrayInput>
<FormSpy
subscription={{ valid: true }}
onChange={props => {
setFormValues(props.values);
}}
/>
</SimpleForm>
</Edit>
);
};
我正在使用 react-admin 作为管理界面。除了编辑表单,我想显示编辑后的值(只是为了了解如何捕获表单更改的值,稍后将显示来自 api 的数据以获取这些更改的值)。我的代码如下(简体)
const Aside = ({ record }) => {
return (
<div style={{ width: 200, margin: '1em' }}>
<Typography variant="h6">Student details</Typography>
<Typography variant="body2">
{record && (
<Typography variant="body2">
{//Will Show current ArrayInput values here, Name/role of current students}
</Typography>
)}
</Typography>
</div>
)};
export const MyEdit = (props) => (
<Edit aside={<Aside />} {...props}>
<SimpleForm>
<ArrayInput source="students">
<SimpleFormIterator>
<TextInput source="name" /
<NumberInput source="role" />
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Edit>
);
如何在 ArrayInput 值发生变化时更新?
React-admin 使用 react-final-form,后者又使用 react Context 来存储当前表单值。
这意味着您无法从表单外部访问这些值(我在旁边是在表单之外)。
解决方案是将当前表单值存储在由 SimpleForm 和 Aside 共享的状态中(甚至在 Redux 存储中)。为此,请在表单中使用 FormSpy,这将在值更改时更新共享状态。
// in MyEdit.js
export const MyEdit = (props) => {
const [formValues, setFormValues] = useState();
return (
<Edit aside={<Aside formValues={formValues} />} {...props}>
<SimpleForm>
<ArrayInput source="students">
<SimpleFormIterator>
<TextInput source="name" /
<NumberInput source="role" />
</SimpleFormIterator>
</ArrayInput>
<FormSpy
subscription={{ valid: true }}
onChange={props => {
setFormValues(props.values);
}}
/>
</SimpleForm>
</Edit>
);
};