如何禁用数组输入中的add with condition

Question

我有一个Json数组作为字段的对象:

{
name: "test",
field: [
{name: "field1",value: "value1"},
{name: "field2",value: "value2"}
]
}

我使用api平台作为数据提供者。我使用editguess的反应管理如下:

const SetsEdit = (props:any) => (
<EditGuesser {...props}>
<InputGuesser source="name" />
<ArrayInput source="field">
<SimpleFormIterator inline disableAdd={disableAdd(props)}>
<TextInput source="name" helperText={false} />
<TextInput source="value" helperText={false} />
</SimpleFormIterator>
</ArrayInput>
</EditGuesser>
);

我正在使用hydra admin中的编辑猜测器

<HydraAdmin
dataProvider={dataProvider(setRedirectToLogin)}
layout={MyLayout}
loginPage={LoginPage}>
<ResourceGuesser
name="sets"
edit={SetsEdit}
/>
</HydraAdmin>

我想做的是我想禁用添加时字段。长度为>=到4。所以我想根据对象的值给道具disablead添加一个条件。如何将对象值传递给函数以返回true或false ?

Answer 1

您必须使用react-hook-form的useWatch或react-admin的<FormDataConsumer>来观察实际的表单数据，并在您的disableAddprop中使用该数据。

类似(未测试):

const SetsEdit = (props:any) => (
<EditGuesser {...props}>
<InputGuesser source="name" />
<FormDataConsumer>
{({ formData }) => (
<ArrayInput source="field">
<SimpleFormIterator inline disableAdd={disableAdd(formData)}>
<TextInput source="name" helperText={false} />
<TextInput source="value" helperText={false} />
</SimpleFormIterator>
</ArrayInput>
)}
</FormDataConsumer>
</EditGuesser>
);