带有 SimpleFormIterator 和条件输入的 ArrayInput
ArrayInput with SimpleFormIterator and conditional inputs
假设我的创建表单中有以下数组
const CreateDefaults = {Inputs: [{id: "ID1", param: "a"},{id: "ID2", param: "b"}]};
然后我只想在 id==="ID2"
时显示额外的 TextInput
export const MyCreate = withStyles(myStyles)(({ classes, ...props }) => (
<Create {...props}>
<SimpleForm defaultValue={CreateDefaults}>
<ArrayInput source="Inputs" {...props}>
<SimpleFormIterator {...props}>
<DisabledInput source="id" />
{/*this does not work*/}
{this.id === "ID2" ? (<TextInput source="ParamValue"/>) :null}
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Create>
));
我该怎么做?我知道对于整个表格,可以使用 FormDataConsumer
。但是,对于每次迭代,在 ArrayInput/SimpleFormIterator
中可以做什么?
如何在迭代中访问当前对象?我尝试了类似 the answer given to the 'Custom Input do not receive record when inside ArrayInput' issue in the react-admin github page 的方法,但它仍然没有收到自定义输入中的记录。
从最新的文档 here,您可以看到,如果您在 ArrayInput
中使用 FormDataConsumer
,您有一个名为 scopedFormData
的参数,您可以用于获取当前记录并取消引用以获取您需要的任何字段。它通常还与 getSource
函数一起使用,您可以在 FormDataConsumer
.
中设置源时使用
假设我的创建表单中有以下数组
const CreateDefaults = {Inputs: [{id: "ID1", param: "a"},{id: "ID2", param: "b"}]};
然后我只想在 id==="ID2"
TextInput
export const MyCreate = withStyles(myStyles)(({ classes, ...props }) => (
<Create {...props}>
<SimpleForm defaultValue={CreateDefaults}>
<ArrayInput source="Inputs" {...props}>
<SimpleFormIterator {...props}>
<DisabledInput source="id" />
{/*this does not work*/}
{this.id === "ID2" ? (<TextInput source="ParamValue"/>) :null}
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Create>
));
我该怎么做?我知道对于整个表格,可以使用 FormDataConsumer
。但是,对于每次迭代,在 ArrayInput/SimpleFormIterator
中可以做什么?
如何在迭代中访问当前对象?我尝试了类似 the answer given to the 'Custom Input do not receive record when inside ArrayInput' issue in the react-admin github page 的方法,但它仍然没有收到自定义输入中的记录。
从最新的文档 here,您可以看到,如果您在 ArrayInput
中使用 FormDataConsumer
,您有一个名为 scopedFormData
的参数,您可以用于获取当前记录并取消引用以获取您需要的任何字段。它通常还与 getSource
函数一起使用,您可以在 FormDataConsumer
.