react-admin 组件的问题
Posted
技术标签:
【中文标题】react-admin 组件的问题【英文标题】:Problems with react-admin components 【发布时间】:2020-08-16 12:57:22 【问题描述】:我正在尝试在 Edit 中使用 TabbedShowLayout 但这会返回与缺少道具相关的错误:
print of the error
这是我的代码:
export const BarberEdit = (props) =>
const [id, setId] = useState(props.id);
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [birthday, setBirthday] = useState(Date);
const [transport, setTransport] = useState("");
const [email, setEmail] = useState("");
function handleSubmit()
console.log("alguma coisa.");
return (
<Edit ...props title=<BarberEditTitle />>
<TabbedShowLayout>
<Tab label="Perfil">
<SimpleForm submitOnEnter=false>
<TextInput source="name" />
<TextInput source="phone" />
<DateInput source="birthday" />
<TextInput source="transport" />
<TextInput source="email" />
</SimpleForm>
</Tab>
<Tab label="Endereço">
<ReferenceManyField
label=""
reference="barbers_addresses"
target="barberId"
>
<Datagrid>
<TextField source="street" label="Rua" />
<TextField source="city" label="Cidade" />
<TextField source="district" label="Bairro" />
</Datagrid>
</ReferenceManyField>
</Tab>
</TabbedShowLayout>
</Edit>
);
;
稍微阅读react-admin文档,我发现SimpleForm有两个继承属性。
提前致谢!
【问题讨论】:
如果您删除TabbedShowLayout
的所有子代并一次又添加一个(例如,添加一个、删除它、添加另一个、删除它、重复)会发生什么?
请发布文本,而不是文本图像的链接。
@McKayM 我相信我们会得到相同的结果,因为错误在于是否继承属性。然后在某个时候他会再次出现
@DaveNewton 我的帐户是最近的,因此我仍然无权发布图片,只需链接以引用它们:(
... 您可以发布文本。是文字的图片。发布文字,而不是图片。
【参考方案1】:
对于编辑和创建布局,您应该使用 TabbedForm,而不是 TabbedShowLayout, 另外,不需要使用 SimpleForm 作为 Tab child,您可以将 submitOnEnter 直接传递给 TabbedForm
export const BarberEdit = (props) =>
const [id, setId] = useState(props.id);
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [birthday, setBirthday] = useState(Date);
const [transport, setTransport] = useState("");
const [email, setEmail] = useState("");
function handleSubmit()
console.log("alguma coisa.");
return (
<Edit ...props title=<BarberEditTitle />>
<TabbedForm submitOnEnter=false>
<FormTab label="Perfil">
<TextInput source="name" />
<TextInput source="phone" />
<DateInput source="birthday" />
<TextInput source="transport" />
<TextInput source="email" />
</FormTab>
<FormTab label="Endereço">
<ReferenceManyField
label=""
reference="barbers_addresses"
target="barberId"
>
<Datagrid>
<TextField source="street" label="Rua" />
<TextField source="city" label="Cidade" />
<TextField source="district" label="Bairro" />
</Datagrid>
</ReferenceManyField>
</FormTab>
</TabbedForm>
</Edit>
);
;
【讨论】:
哇!感谢您的贡献!我只是做了一些调整,因为 TabbedForm 不是和 Tab 一起工作的,而是 FormTab。一切都恢复正常了:) 你是对的。我用 FormTab 编辑了答案。很高兴一切正常。以上是关于react-admin 组件的问题的主要内容,如果未能解决你的问题,请参考以下文章
在 react-admin 中获得对 redux 存储的访问权限