如何使用React-Admin formtab?

发布于 2025-02-10 07:44:11 字数 4936 浏览 2 评论 0原文

因此,正如标题所说,我正在使用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.
Image with the output identical to simpleform
So, my question is, why cannot I use FormTab in the first place?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文