如何使用React-Admin formtab?
因此,正如标题所说,我正在使用react-admin@^4.0.1
创建仪表板。在某个时候,我想在我的产品编辑部分中添加TabBedform
。但是我无法使它起作用。甚至我复制了一个简约的代码,以查看它是否有效,但没有运气。我使用的简约代码如下:
<Edit>
<TabbedForm>
<FormTab label="main">
<TextInput source="id" />
<TextInput source="body" />
</FormTab>
<FormTab label="main">
<TextInput source="id" />
<TextInput source="body" />
</FormTab>
</TabbedForm>
</Edit>
以下代码给出以下输出:
Cannot read properties of undefined (reading 'toString')
at FormTab (http://localhost:3000/static/js/bundle.js:135354:16)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Stack (http://localhost:3000/static/js/bundle.js:44198:87)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at CardContent (http://localhost:3000/static/js/bundle.js:25679:82)
at DefaultComponent (http://localhost:3000/static/js/bundle.js:135434:15)
at form
at FormGroupsProvider (http://localhost:3000/static/js/bundle.js:124243:15)
at FormProvider (http://localhost:3000/static/js/bundle.js:191367:5)
at RecordContextProvider (http://localhost:3000/static/js/bundle.js:122421:15)
at OptionalRecordContextProvider (http://localhost:3000/static/js/bundle.js:122650:12)
at Form (http://localhost:3000/static/js/bundle.js:124438:15)
at SimpleForm (http://localhost:3000/static/js/bundle.js:135410:15)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Paper (http://localhost:3000/static/js/bundle.js:40389:82)
at http://localhost:3000/static/js/bundle.js:12411:66
at Card (http://localhost:3000/static/js/bundle.js:25532:82)
at div
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at EditView (http://localhost:3000/static/js/bundle.js:134934:14)
at RecordContextProvider (http://localhost:3000/static/js/bundle.js:122421:15)
at SaveContextProvider (http://localhost:3000/static/js/bundle.js:122445:15)
at EditContextProvider (http://localhost:3000/static/js/bundle.js:122673:15)
at Edit (http://localhost:3000/static/js/bundle.js:135030:72)
at ProductEdit (http://localhost:3000/main.c0b5735e8eac78c89437.hot-update.js:817:92)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at ResourceContextProvider (http://localhost:3000/static/js/bundle.js:121565:15)
at Resource (http://localhost:3000/static/js/bundle.js:121574:13)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at ErrorBoundary (http://localhost:3000/static/js/bundle.js:169933:37)
at div
at main
at div
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Layout (http://localhost:3000/static/js/bundle.js:128684:13)
at div
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at CoreAdminRoutes (http://localhost:3000/static/js/bundle.js:121406:11)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at CoreAdminUI (http://localhost:3000/static/js/bundle.js:121482:15)
at AdminUI (http://localhost:3000/static/js/bundle.js:138084:19)
at Resources (http://localhost:3000/static/js/bundle.js:88:39)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:53363:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:53070:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:53383:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:129126:15)
at ResourceDefinitionContextProvider (http://localhost:3000/static/js/bundle.js:121223:18)
at NotificationContextProvider (http://localhost:3000/static/js/bundle.js:119021:15)
at I18nContextProvider (http://localhost:3000/static/js/bundle.js:119046:12)
at Router (http://localhost:3000/static/js/bundle.js:176928:15)
at HistoryRouter (http://localhost:3000/static/js/bundle.js:118579:15)
at InternalRouter (http://localhost:3000/static/js/bundle.js:118631:15)
at BasenameContextProvider (http://localhost:3000/static/js/bundle.js:118602:15)
at AdminRouter (http://localhost:3000/static/js/bundle.js:118611:14)
at QueryClientProvider (http://localhost:3000/static/js/bundle.js:174232:21)
at StoreContextProvider (http://localhost:3000/static/js/bundle.js:118948:12)
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:121253:19)
at AdminContext (http://localhost:3000/static/js/bundle.js:138102:12)
at App
查看formtab
的源代码后,我通过添加value
属性来解决此问题每个formtab
(尽管我不知道这意味着什么,但没有文档)。但是,即使在解决方法之后,我也有一个没有选项卡的输出。 那么,我的问题是,为什么我不能首先使用formtab?
So, as the title says, I am using react-admin@^4.0.1
to create a dashboard. At some point, I wanted to add TabbedForm
in my product edit section. But I could not make it work. Even I copied a minimalistic code to see if it is working, but no luck. The minimalistic code that I used a follows:
<Edit>
<TabbedForm>
<FormTab label="main">
<TextInput source="id" />
<TextInput source="body" />
</FormTab>
<FormTab label="main">
<TextInput source="id" />
<TextInput source="body" />
</FormTab>
</TabbedForm>
</Edit>
The above code gives the output as follows:
Cannot read properties of undefined (reading 'toString')
at FormTab (http://localhost:3000/static/js/bundle.js:135354:16)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Stack (http://localhost:3000/static/js/bundle.js:44198:87)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at CardContent (http://localhost:3000/static/js/bundle.js:25679:82)
at DefaultComponent (http://localhost:3000/static/js/bundle.js:135434:15)
at form
at FormGroupsProvider (http://localhost:3000/static/js/bundle.js:124243:15)
at FormProvider (http://localhost:3000/static/js/bundle.js:191367:5)
at RecordContextProvider (http://localhost:3000/static/js/bundle.js:122421:15)
at OptionalRecordContextProvider (http://localhost:3000/static/js/bundle.js:122650:12)
at Form (http://localhost:3000/static/js/bundle.js:124438:15)
at SimpleForm (http://localhost:3000/static/js/bundle.js:135410:15)
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Paper (http://localhost:3000/static/js/bundle.js:40389:82)
at http://localhost:3000/static/js/bundle.js:12411:66
at Card (http://localhost:3000/static/js/bundle.js:25532:82)
at div
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at EditView (http://localhost:3000/static/js/bundle.js:134934:14)
at RecordContextProvider (http://localhost:3000/static/js/bundle.js:122421:15)
at SaveContextProvider (http://localhost:3000/static/js/bundle.js:122445:15)
at EditContextProvider (http://localhost:3000/static/js/bundle.js:122673:15)
at Edit (http://localhost:3000/static/js/bundle.js:135030:72)
at ProductEdit (http://localhost:3000/main.c0b5735e8eac78c89437.hot-update.js:817:92)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at ResourceContextProvider (http://localhost:3000/static/js/bundle.js:121565:15)
at Resource (http://localhost:3000/static/js/bundle.js:121574:13)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at ErrorBoundary (http://localhost:3000/static/js/bundle.js:169933:37)
at div
at main
at div
at div
at http://localhost:3000/static/js/bundle.js:12411:66
at Layout (http://localhost:3000/static/js/bundle.js:128684:13)
at div
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at CoreAdminRoutes (http://localhost:3000/static/js/bundle.js:121406:11)
at Routes (http://localhost:3000/static/js/bundle.js:176995:5)
at CoreAdminUI (http://localhost:3000/static/js/bundle.js:121482:15)
at AdminUI (http://localhost:3000/static/js/bundle.js:138084:19)
at Resources (http://localhost:3000/static/js/bundle.js:88:39)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:53363:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:53070:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:53383:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:129126:15)
at ResourceDefinitionContextProvider (http://localhost:3000/static/js/bundle.js:121223:18)
at NotificationContextProvider (http://localhost:3000/static/js/bundle.js:119021:15)
at I18nContextProvider (http://localhost:3000/static/js/bundle.js:119046:12)
at Router (http://localhost:3000/static/js/bundle.js:176928:15)
at HistoryRouter (http://localhost:3000/static/js/bundle.js:118579:15)
at InternalRouter (http://localhost:3000/static/js/bundle.js:118631:15)
at BasenameContextProvider (http://localhost:3000/static/js/bundle.js:118602:15)
at AdminRouter (http://localhost:3000/static/js/bundle.js:118611:14)
at QueryClientProvider (http://localhost:3000/static/js/bundle.js:174232:21)
at StoreContextProvider (http://localhost:3000/static/js/bundle.js:118948:12)
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:121253:19)
at AdminContext (http://localhost:3000/static/js/bundle.js:138102:12)
at App
After looking at the source code of FormTab
, I fixed this issue by adding the value
attribute of each FormTab
(though I don't know what it means, there are no docs). But even after the workaround, I am having an output without tabs.
So, my question is, why cannot I use FormTab in the first place?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论