如何在react-admin中访问自定义组件中的表单数据？
在react-admin中访问自定义组件中的表单数据，可以通过以下步骤实现：
- 在自定义组件中，使用react-admin提供的FormDataConsumer组件来获取表单数据。FormDataConsumer组件可以将表单数据作为props传递给自定义组件。
import { FormDataConsumer } from 'react-admin';
const MyCustomForm = () => (
<FormDataConsumer>
{({ formData }) => (
// 在这里可以访问到表单数据
// 可以根据需要进行处理或展示
<div>{formData.fieldName}</div>
)}
</FormDataConsumer>
);- 在react-admin的表单中使用自定义组件。可以将自定义组件作为字段的component属性传递给react-admin的TextInput、SelectInput等组件。
import { Edit, SimpleForm, TextInput } from 'react-admin';
import MyCustomForm from './MyCustomForm';
const MyEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="fieldName" />
<MyCustomForm />
</SimpleForm>
</Edit>
);通过以上步骤，你可以在自定义组件中访问到react-admin表单中的数据，并根据需要进行处理或展示。
对于react-admin的具体使用和更多相关概念，你可以参考腾讯云提供的产品文档和示例代码：
- 腾讯云产品文档：react-admin 文档
- 腾讯云产品示例代码：react-admin 示例代码
相关·内容
我正在尝试创建一个表单，以获取使用React-admin仅存储但不显示的信息。到目前为止，我只在react-admin中看到过当您想要向现有表添加信息或编辑信息时的表单。有没有一种方法可以让表单作为第一件事出现，并且只发布信息？
浏览 10提问于2020-01-04得票数 0
回答已采纳
在react-admin 组件验证中，当我单击“保存”按钮时，它可以正常工作。当我单击“保存”按钮时，需要的字段将被高亮显示并标记为红色。
只要表单无效，我想将一个className添加到SaveButton中。这样，我就可以向用户清楚地表明，他还没有完成表单的操作，并阻止用户单击表单。
这是这样一个SimpleForm的简化版本。
import {
required,
//...
} from 'react-admin';
const UserCreateToolbar = props =>
<Toolbar {...props}>
浏览 1提问于2018-06-18得票数 4
回答已采纳
如何从1个资源中填充表单数据，然后使用react的编辑组件和SimpleForm将数据更新到另一个源？
我希望更新到源名event_source_measurement_protocol_description_updated，而不是source_measurement_protocol。，它用于填充窗体字段的当前数据。
我目前使用的是react-admin v4.1.0
export const SourceMeasurementProtocolUpdateDescription = () => (
<Edit resource="source_measurement
浏览 5提问于2022-10-24得票数 1
回答已采纳
2回答
我想从react-admin创建一个‘克隆’按钮，它将允许我克隆/复制现有的数据记录到另一个记录中，并将打开一种编辑表单来编辑它们并创建一个新的条目。我该怎么做呢？
附言:我正在使用Typescript
目前我的代码是这样的
<Datagrid rowStyle={modelRowStyle}>
<TextField source="format" />
<TextField source="status" />
<EditButton basePath="/models" /&g
浏览 0提问于2018-05-31得票数 3
这就是在react-admin中实例化组件的方式，但是现在我需要在PostList和UserList之间共享notifications实例。我想避免使用单件对象。有没有可能以某种方式将“通知”对象传递给列表？ import React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/People';
import { Admin, Resource } from 'react-ad
浏览 11提问于2020-07-18得票数 4
回答已采纳
2回答
我想从react admin v4中重置特定字段(元素)。
目前，表单有三个相关字段，如：
ABC
当您选择A时，select B是启用的，当B是相同的，如果对C，快乐流非常好的工作。
目前，我使用的是FormDataConsumer，因此字段是依赖的。
问题是当用户决定更改元素A或B时，表单不再重新加载，源仍然相同。
例如：
用户选择A，field_a = X，然后选择B，field_b = Y，然后选择C，field_c = Z
然后对A进行了更新，结果如下：
字段B是清楚的(仅从UI的角度来看)，因为formData.field_a仍然是设置的字段C仍然是设置的。
您知道如何在onCha
浏览 30提问于2022-10-13得票数 2
我在React-Admin框架中制作应用程序。现在我正在创建编辑表单： <Resource name="order" edit={OrderEdit} /> 我想决定是否显示基于记录的Edit View。 例如，如果data provider中的记录'id‘等于5，则显示警报并重定向到主视图'/orders'： const OrderEdit = (props) => {
const checkId = (id) => {
if(id==5){
alert('You ca
浏览 21提问于2020-11-24得票数 0
我知道react-admin中的自定义主题过程。 我想知道在react-admin中是否有可能实现一个自定义的主题，而不需要一个接一个的组件和我们自己的主题化。例如，Material Ui premium themes (see here)
浏览 29提问于2021-09-27得票数 0
1回答
我有画布编辑器组件，它在react-admin的SimpleForm中为我提供base64图像数据，如何将图像文件上传到服务器？我正在使用数据提供程序：
<Create {...props}>
<SimpleForm>
<TextInput source='location_name'/>
<EditorComponent />
</SimpleForm>
</Create>
我是新的react和react-admi
浏览 1提问于2019-10-19得票数 0
我正在尝试使用活动存储将图像从react-admin上传到rails api后端。 在react-admin的文档中写道：“请注意，图像上传返回一个文件对象。根据您的API行为，您有责任处理它。例如，您可以将其编码为base64，或者将其作为多部分表单数据发送。”我正在尝试将其作为多部分表单发送。 我到处都在阅读，但我找不到我想要的东西，至少找不到我应该如何进行的路线图。
浏览 31提问于2019-01-15得票数 3
我正在使用React-Admin，并且在我的数据库中有一个包含换行符(\n)的字段。当我在如下所示的页面上输出时： <TextField source="extra_details" /> 换行符将被忽略，所有内容都会一起运行。如何才能正确显示换行符？ 谢谢
浏览 11提问于2019-05-02得票数 3
在react-admin的复杂选项卡式表单中，我需要有两个提交按钮，一个是常规保存按钮，另一个用于更改“状态”字段(前进一个工作流步骤)和保存表单。 只有当用户填写了所有必填字段时，保存按钮才会变为活动状态。另一个按钮根据包含当前工作流步骤的记录中的"status“字段更改其文本，并且仅当当前工作流步骤的表单验证通过时才处于活动状态。 因此，我需要一个动态按钮或几个按钮，显示和隐藏取决于“状态”字段。我认为动态按钮将是更优雅的解决方案。 下面你可以看到我目前拥有的代码，它或多或少是从react-admin文档中复制过来的。我还需要添加一个自定义的保存按钮，但它只是一个子集，当Adva
浏览 17提问于2020-01-30得票数 4
1回答
如何让react-admin在snackbar上显示多行通知/错误消息？ 具有以下dataProvider： export default (type, resource, params) => {
throw new Error(`
Message line 1.
Message line 2.
Message line 3.
`);
}; 它在加载List组件时显示单行消息： error notification screenshot
浏览 14提问于2019-08-29得票数 2
回答已采纳
我正在使用react-admin框架(3.2)，并试图在用户从Edit form视图导航时触发beforeunload事件。假设我的路径名是"feed/123"。当beforeunload以任何方式改变时(用户正在离开编辑表单)，url应该会触发。到目前为止，我已经尝试了以下代码： const FeedEdit = props => {
const alertUser = (e) =>
{
e.preventDefault();
e.returnValue = '';
console.
浏览 93提问于2021-05-11得票数 0
我是新的反应-管理，我正在尝试建立一个自定义图片库输入。它应该显示一个带有图像的模式(数据已经被获取并存储在redux中)，这样用户就可以选择一个或多个图像(在选择时，将调度一个操作来更新缩减程序的值)，并且我需要在<Create />上的transform函数中使用这些选择的图像in，以便可以在调用dataProvider方法之前添加所需的数据。
但我有一个奇怪的问题，那可能是因为我缺乏反应知识。在下面的代码片段中，我尝试获取useReducer的值，然后将其添加到表单中。
import React, { useReducer, useMemo, useEffect, useCa
浏览 3提问于2021-03-10得票数 0
回答已采纳
3回答
在Delphi中一个比较复杂的数据库应用程序中，很容易在表单上拥有数十个数据集(表和查询)和相关的数据源。
所有这些杂乱的画面。
如果表单有一个pagecontrol，每个页面都有自己的数据源等，情况就会变得更糟。
如果表和数据源是可视控件，那么它们至少只能在适用的Tabsheet上可见。
我已经考虑过创建一个容器对象，它可以容纳许多数据集和数据源，但却一直没有得到满足。
我也有cnPack，它增加了选项，以隐藏设计器中的非可视组件。然而，这是没有帮助的，因为它使它很难选择他们。
：在选择数据访问组件的同时，如何消除表单设计器的混乱？
(值得我在德尔菲2007和XE2工作)
浏览 2提问于2011-12-09得票数 5
我正在创建一个使用Nextjs的React应用程序。 我真的想对我的BO使用react-admin。我试过test example，和react配合使用，它工作得很好。不幸的是，虽然我试图在next js中包含一些代码，但它不能工作。 我创建了/admin/dashboard.tsx文件，并添加了下一步代码(之前我自己测试过-工作代码)： import * as React from 'react';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@mater
浏览 30提问于2021-01-08得票数 11
我正在使用react-admin list component，并希望为特定行添加自定义布局。 通常，每一行都是由list组件使用来自数据提供程序的数据构建的。我想根据行的数据自定义特定的行。这些特定的行不应该使用标准布局(和列)，而应该使用专门定义的布局。 下面是我正在寻找的一个示例： ? 应根据数据对象选择特殊行。形成标准行的标准数据对象可能如下所示： {
id: 127,
Reference: "OEPEE4",
author_id: 12,
...
} 特殊条目可能如下所示： {
id: 128,
isSpecia
浏览 23提问于2019-05-27得票数 2
回答已采纳
我正在使用react-admin，我想在另一个组件中显示所选的图像。
我的编辑屏幕上已经有了一个图像。当我用ImageInput选择一个新的图像时，我想在我的<Poster />组件中显示它，并用新的图像更改现有的图像。
<Poster id="poster" {...props} source="card_image_path"
label="resources.cards.fields.card_image_path" />
<ImageInput id="imageInput" source
浏览 5提问于2018-12-03得票数 2
我最近开始使用react-admin，遇到了notify的问题。添加注册的自定义路由，noLayout属性，期望通知在发生事情时向我显示消息。Notify不会在屏幕上显示消息。它可以在其他一些非自定义的页面中工作。如果有人知道这里的问题是什么，tnx。
浏览 20提问于2021-10-14得票数 0
我是react.js的新手，react-admin吸引了我的眼球来使用它。但是我有一个关于它正在使用的端点的问题
http://localhost:3333/verifications/browse?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D
是否可以删除过滤器参数？因为我想使用我的api，它是
http://localhost:3333/verifications/browse?page=1&per_page=10&verification_level_id=1&ver
浏览 6提问于2021-06-10得票数 0
特别是我对react和react-admin是个新手。
我正在尝试将Datagrid嵌入到Edit表单中。
API props (record)有一个对象的子数组，所以我不需要使用ReferenceManyField或类似的东西从Edit加载相关记录。
但是我似乎找不到如何引用记录的数组作为列表的ListProp
如果任何人有任何例子，那将是很好的。
谢谢
浏览 0提问于2020-11-24得票数 0
我已经在我的react应用程序中使用react json schema form构建了一个表单。而且我的代码已经有了一个定制的可重用按钮组件。尝试在表单中使用相同的按钮组件，但无法获取编辑后的表单数据。有没有办法获得最新的表单数据？
浏览 27提问于2020-01-12得票数 0
我正在尝试访问react-admin项目中的刷新按钮。我尝试使用getElementsbyClassName，它返回HTMLComponents对象，但它无法访问，即我可以在将其打印到控制台时看到组件，但无法通过代码访问。有没有办法在我想要的任何地方禁用这个刷新按钮？
浏览 15提问于2021-04-26得票数 0
回答已采纳
在react-admin中，我有以下ReferenceArrayInput -> SelectArrayInput组件：
<Create {...props}>
<SimpleForm>
<ReferenceArrayInput source="clients" reference="client">
<SelectArrayInput optionText="clientName" />
</ReferenceArray
浏览 2提问于2021-07-06得票数 0
通过使用React-admin，我使用了ShowController组件，它让我可以更自由地定制ShowView。然而，我希望继续看到TextFields中的标签，但是，它们已经消失了。 这段代码显示了我是如何使用标签的，并且，它部分工作:只显示记录值，而不显示标签(我也尝试了没有道具“ShowController”，它也不起作用)。 const OrderShow = props => {
return (<ShowController {...props}>
{controllerProps => {
return
浏览 16提问于2019-01-17得票数 1
回答已采纳
我刚开始使用ReactJS和MaterialUI，我正在努力理解样式与使用CSS有何不同。 我的意思是，在CSS中，你可以为所有输入或选择元素定义一个全局规则，但在ReactJS中，你看起来不能这样做，你必须一个接一个地将类传递给所有元素。我确信我遗漏了什么，但我还没有找到什么。 例如，如果我在一个表单中有10个TextField (实际上我正在使用react-admin中的TextInput )，我希望其中的10个具有相同的宽度，而不必声明一个style对象，使用withStyles(style) HOC传递它，并逐个设置className={classes.input}。
浏览 15提问于2018-12-18得票数 2
我已经尝试了passport-saml站点上的示例代码，以及OAuth的react-admin站点上的高级教程，但还不能弄清楚我需要对authProvider做些什么才能使用SAML在react-admin中获得可用的身份验证会话。 我现在可以通过OneLogin登录我的应用程序(点击面板中的应用程序)，并写出用户的信息(在passport.serializeUser函数中)，所以我知道这个部分是有效的，但我不确定如何将这些信息传递到authProvider上。 当你提交表单时，authProvider上的登录功能会被点击，所以如果我可以复制OneLogin在我点击应用程序时发送的内容，我可
浏览 22提问于2020-08-21得票数 0
我试图在React-admin的列表视图中呈现动态生成的字段。只要我们将每个字段硬编码传递给Datagrid，它就工作得很好，但我想显示字段(TextField、DateField等)。动态地基于每个字段的类型。
为此，我创建了一个名为<RenderType/>的组件，它将具有每行字段的对象作为支撑，并动态返回React-admin组件(TextField、DateField )，但它不会显示在不同的列中，但它会将所有结果放在一列中。
import React from 'react';
import { List, Datagrid, TextField, Edi
浏览 1提问于2019-12-13得票数 2
当有人单击按钮时，我想在console中显示用户的id。但是，它没有显示出来。我正在使用react-admin。这是我的代码： import { List, Datagrid, TextField, Button } from 'react admin';
function ShowData(id) {
console.log(id);
}
export const UserList = props => {
return (
<>
<List>
<Datagrid>
浏览 38提问于2021-09-20得票数 0
如何在“反应管理”中创建一个没有列表的数据栅格？
在React-admin中，可以使用Datagrid来显示您需要将其嵌套在如下列表中的值：
<List {...props}>
<Datagrid>
<Textfield source"name" />
<Datagrid />
<List/>
但是我需要在列表之外使用dDatagrid。数据栅格的值必须显示在Tab中类型的屏幕中。
浏览 1提问于2020-04-01得票数 1
回答已采纳
2回答
首先我得说，我真的很喜欢react-admin。这是一个很棒的包！
但我的问题是:如何将属性从SelectInput传递给我的数据提供程序？
我在ReferenceInput中有一个SelectInput和一个自定义的添加和删除按钮。这是可行的。但我需要将父级和子级实体的i传递给我的数据提供者，这样才能添加/删除正确的对象。
代码：
<ReferenceInput label="Child to add" source="exercise_id" helperText="Add child to Parent" reference="
浏览 26提问于2019-11-26得票数 1
回答已采纳
reac-admin alert dialog example 我正在开发一个使用React-admin的管理员。我尝试设置警告对话框的样式，在页面中显示错误、警告和成功消息。例如，我想在这个警报中设置一些css，比如z索引、背景颜色……我已经在Material UI中看到了如何定制组件的文档，但问题是在react-admin中这个组件看起来是本机的，而我在react-admin中找不到任何关于我的问题的信息。我很感谢你的帮助。问候
浏览 15提问于2019-12-11得票数 1
回答已采纳
因此，我使用的是react-admin https://marmelab.com/react-admin，并且每当我在create函数上发送文件时，我都希望显示上传进度。 import React from "react";
import { Create, SimpleForm, FileInput, FileField } from "react-admin";
export const PostFile = props => (
<Create {...props}>
<SimpleForm>
&l
浏览 56提问于2019-10-04得票数 2
在使用TabbedForm时，有没有办法有条件地删除特定选项卡中的提交按钮(工具栏)？(react-admin)
浏览 1提问于2018-04-29得票数 4
在React-Admin中，在我们的注册表单( SimpleForm )上，为了增加安全性和用户的信任，我们不希望我们的服务器以明文形式接收用户密码(即使我们是在HTTPS中)。
我们想用相关的sha256散列替换动态的值(在服务器端，我们存储这个散列的bcrypt版本)
从用户的角度来看，有没有一种解决方案可以在不改变SimpleForm中的值的情况下做到这一点呢？因为，如果服务器API在表单中返回错误，用户将再次提交表单，而我们仍然需要转换原始密码值。
致以敬意，
浏览 0提问于2018-08-24得票数 0
我正在为我的angular应用程序编写Karma测试。我使用用ControllValueAccessor创建的自定义表单控件。
有没有一种方法来测试实现的ControllValueAccessor方法(registerOnChange，...)
@Component({
selector: 'my-form-input',
templateUrl: 'input.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExis
浏览 6提问于2019-10-19得票数 0
如何在react-admin中创建子菜单，因为在admin-on-rest中，我可以在MenuItem组件中使用适当的menuItems。对于这种情况，react-admin也有同样的支持吗？
我尝试创建我自己的组件，但在全局中为给定列表名称设置了适当的主属性，我的应用程序总是显示错误: Uncaught : Cannot read property '@global‘
谢谢
浏览 0提问于2018-11-16得票数 6
我使用的是可翻译的KNP，我有以下数据结构：
用户(id，姓名，电子邮件，密码.)角色(id，name @translatable)
用户角色是多到多的关系。
我将表单类型定义为：
->add('roles', 'entity', [
'class' => 'SocialCarBackendBundle:Role',
'property' => 'name',
'multiple' => true,
'expanded&
浏览 3提问于2015-05-19得票数 2
回答已采纳
我正在使用react-admin。
我将<DashboardMenuItem>替换/更改为<MenuItemLink> (概述)。
不幸的是，这个“概述”总是出现在active上。
知道当另一个菜单项被选中时如何禁用它吗？
在所附图片中，请注意“概述”和“评审”似乎被选中(active)
// Removed this line...
- <DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />
// And replaced it with this...
+ &l
浏览 3提问于2020-03-16得票数 3
我需要一些关于如何使用react-admin构建分析/统计页面的支持或指导。我已经用谷歌搜索了这样做的方法，但到目前为止我还没有找到任何东西，而且看起来react-admin在定制方面太紧了。
我需要的是
因此，基本上我需要一种方法来计算来自resource的帖子、用户甚至评论的数量。如下所示：
可以在另一个独立页面上看到类似这样的内容：
但基本上，你可以从你的数据提供商那里获取数据，并将其呈现为普通的分析板或类似的东西。
这是一种在react-admin中实现的可行方法吗？有没有其他方法，比如第三方集成，可以帮助我解决这个问题？如有任何建议，我将不胜感激！
浏览 3提问于2021-10-29得票数 0
因此，我创建了一个自定义字段，用于，如下所示：
import * as React from "react";
import { useRecordContext } from "react-admin";
export const IsOnline = (props:{view:string}) => {
const record = useRecordContext();
if (record.is_online)
return <span className={props.view}>{(&#
浏览 8提问于2022-10-03得票数 0
回答已采纳
在尝试使用react-admin官方文档中的自定义login页面时，我遇到了这个错误。
index.js:1 Warning: Failed prop type: The prop `theme` is marked as required in
`ThemeProvider`, but its value is `undefined`.
在MyLoginPage.js中，我有以下代码
import * as React from 'react';
import { useState } from 'react';
import { useLogin, useN
浏览 0提问于2020-07-29得票数 4
我想在CQ5中创建登录表单使用正常的JSP和AJAX请求与数据库。谁能告诉我在CQ5中使用普通JSP和AJAX的步骤？
浏览 1提问于2011-07-24得票数 1
我在使用as和render的react钩子表单中见过 例如： <Controller
render={({ field }) => <input {...field} />}
name="firstName"
control={control}
defaultValue=""
/> 或 <Controller
as={<input .. />}
name="firstName"
contro
浏览 16提问于2021-08-27得票数 1
1回答
我是JS和React的新手。
我的目标是用react-admin列表中当前记录的数据填充包含react-seat-picker的自定义Edit。然后我选择一个座位，我想通过默认的保存按钮保存新的座位选择？
我正在使用react admin试图将react-seat-picker集成到自定义创建表单中。我设法通过react-admin将数据库中的值带到了react-seat-map中，但是当我保存时，没有发生任何更改。在控制台中，我看到当按下保存按钮时会触发更新，但它总是包含与查询中填充的相同的数据对象。
export const SeatEdit = (props) => (
浏览 13提问于2020-05-25得票数 1
我在编辑表单中获取记录的“更新”值时遇到了很大的麻烦。我总是得到初始记录值，即使我有一个链接到正确记录源的输入，这应该会更新它。
有没有其他方法可以获得SimpleForm的值？
我有一个简单的编辑表单：
<Edit {...props}>
<SimpleForm>
<MyEditForm {...props} />
</SimpleForm>
</Edit>
MyEditForm如下：
class MyEditForm extends React.Component {
componentDi
浏览 11提问于2018-07-30得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
