标签: react-admin

React Admin-以表格形式获取当前值

我很难在编辑表单中获取记录的“更新”值。即使我有一个链接到正确的记录源的输入也应该更新它,但我始终会获得初始记录值。

是否有其他方法来获取SimpleForm的值?

我有一个简单的编辑表格:

<Edit {...props}>
    <SimpleForm>
        <MyEditForm {...props} />
    </SimpleForm>
</Edit>
Run Code Online (Sandbox Code Playgroud)

MyEditForm如下:

class MyEditForm extends React.Component {
    componentDidUpdate(prevProps, prevState, snapshot) {    
        console.log(prevProps.record.surface, this.props.record.surface); // <-- here is my problem, both values always get the initial value I had when I fetched the resource from API
    }

    render() {
        return (
            <div>
                <TextInput source="surface" />
                <!-- other fields -->
            </div>
         );
    }
}
Run Code Online (Sandbox Code Playgroud)

我通常采用这种方式从其他组件获取更新后的组件数据,但是就React-admin表单而言,我无法使其正常工作。

谢谢,

尼古拉斯

react-admin

6
推荐指数
1
解决办法
3420
查看次数

在 react-admin 中添加无需身份验证的自定义页面

我想向我的react-admin门户网站添加一个注册页面。由于react-admin不提供注册页面,我创建了一个自定义页面并将其添加到自定义路由中:

自定义路由.js

import React from 'react';
import { Route } from 'react-router-dom';
import SignupForm from './signupForm';

export default [
    <Route path="/signup" component={SignupForm} noLayout/>,
];
Run Code Online (Sandbox Code Playgroud)

问题是我只能在/signup用户已经登录时打开页面。否则我会自动重定向到/login路由。

如何禁用自定义路由的身份验证?是否有一些属性<Route>接受或与dataProvider.js?

编辑

为 my 添加代表代码signupForm.js

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import { fetchUtils } from 'react-admin';
import { ApiUrl } from './config';

class SignupForm extends React.Component {
    constructor() { …
Run Code Online (Sandbox Code Playgroud)

react-router-dom react-admin

6
推荐指数
1
解决办法
3062
查看次数

如何在 react-admin 上实现忘记密码页面

我在react-admin上实现了一个仪表板。身份验证过程是按照本教程完成的。

现在我需要实现一个忘记密码的屏幕,但问题是这个屏幕需要在没有登录的情况下访问......

我想到了两种可能的方法来实现这一点:

  1. 理想情况下,我想配置 react-admin 以允许未经身份验证的访问特定路由。不确定如何执行此操作,或者是否可能...我发现此 Github 问题将此作为增强功能提及,但它没有解释如何解决该问题。
  2. 在反应中单独实现此屏幕并单独处理到此页面的路由。不确定如何在框架上执行此操作...

有人可以解释如何在框架上实现任一选项吗?

提前致谢,

reactjs react-admin

6
推荐指数
1
解决办法
4440
查看次数

react-admin 中资源路由的自定义路径

有没有办法为资源指定自定义路径?

例子: <Resource name="User" path="/manageUsers" {...}>

如果不可能“每个资源”,例如我们可以让所有 CRUD 页面都在同一个基本路径下,如:/crud/{/$resource.name路径下, } 但保留没有该基本路径的自定义路由。

非常感谢。

编辑#1

对于上下文,我们正在构建一个管理面板,该面板将有很多流程,基本上是逐步创建资源。所以我为 react-admin 库的功能鼓掌(管理 CRUD 部分),但我希望在 URL 的方式上有更大的灵活性。

我需要有一个名为的部分/manageUsers/,该部分将包含一些数据,例如仪表板,然后列表可能是/manageUsers/list/.

然后我可能需要另一个部分/customers/,该部分将直接在该页面上列出。

编辑#2

举另一个用例,我试图使用 graphQL 作为数据提供者,我不得不重命名我的所有资源,因为其余 API 使用userswhere 作为 graphQL 资源是User. 所以我所有的网址现在都不一样了!

我希望这能让它更清楚一点。

react-admin

6
推荐指数
1
解决办法
3573
查看次数

警告:缺少键翻译:“”;

我正在使用 react-admin 创建我的网站。但是我每次都从列表页面收到此警告'警告:缺少键的翻译:“”; '

const ListTitle = () => {
    return <span>User Agents</span>;
}

 const SitemapFilter = props => (
    <Filter {...props}>
     <TextInput label="Type" source="type" alwaysOn/>
   </Filter>
   );

  export const SitemapList = props => (
     <List {...props} filters={<SitemapFilter />} title={<ListTitle />}>
    <Datagrid>
     <TextField source="type" label="Type"/>
     <UrlField source="url" label="URL"/>
     <EditButton/>
   </Datagrid>
 </List>
);
Run Code Online (Sandbox Code Playgroud)

我无法找到原因。请指教。提前致谢。

react-admin

6
推荐指数
1
解决办法
6905
查看次数

在 react-admin 中通过 REST API 进行基于 Cookie 的身份验证

我是反应管理员的新手。我已经阅读了stackoverflow中的所有问题,并且也用谷歌搜索了我的问题,但没有找到任何有用的解决方案。

我正在设置 React-admin 来替换我的一个项目的现有管理页面。我通过 REST API 使用基于 cookie 的身份验证。

是否有可能(如果是,如何?)在 react-admin 中使用它?有人可以引导我走向正确的方向吗?

干杯!

reactjs react-admin

6
推荐指数
1
解决办法
2545
查看次数

React-admin:数据提供程序中缺少标头对象

我正在尝试为我的 API 创建自定义数据提供程序。我能够登录和 GET_LIST 但无法处理接收到的数据。我已经调整了 API 响应所需的输出格式,并且还包含了 Content-Range 标头。

使用 Postman 返回所有标头,但它们似乎在我在 convertHTTPResponse 方法中收到的“响应”中丢失。

由于标题是空的,列表不会出现并显示错误:

警告:缺少键的翻译:“无法读取未定义的属性‘hasOwnProperty’”

对于经过试验的开发人员来说,这当然是显而易见的事情,请帮忙!

编辑:通过在转换 res.json() 之前保存标题来修复它

myDataProvider.js

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {
    let url = '';
    const token = localStorage.getItem('token');
    const options = {
        headers: new Headers({
            Accept: 'application/json',
            Authorization: 'Bearer ' + token
        }),
    };
    switch (type) {
        case GET_LIST:
            {
                const {
                    page,
                    perPage
                } = params.pagination;
                const {
                    field,
                    order
                } = params.sort;
                const query = {
                    sort: JSON.stringify([field, order]), …
Run Code Online (Sandbox Code Playgroud)

react-admin

6
推荐指数
0
解决办法
1142
查看次数

如何在hasura react admin中动态更新数据提供程序标头?

我正在尝试使用 react-admin 和 hasura 数据提供程序来做一个需要身份验证的应用程序,我需要在登录成功后更改标题。现在,标题仅在我重新加载页面时更新,否则会引发此错误:

{"path":"$","error":"Malformed Authorization header","code":"invalid-headers"}
Run Code Online (Sandbox Code Playgroud)

这是我当前的 app.js 代码:

{"path":"$","error":"Malformed Authorization header","code":"invalid-headers"}
Run Code Online (Sandbox Code Playgroud)

这是 authprovider 的代码:

import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';
import graphql from './graphqlClient';
import Cookies from 'universal-cookie';
import { GraphQLClient } from 'graphql-request';
const cookies = new Cookies();

const LOGIN = `
    mutation($username:String!, $password:String!){
        login(username: $username, password: $password){
            token
        }
    }
`;
const ME = `
    query {
        me {
            username
        }
    }
`;

export default (type, params) => {

    if (type === …
Run Code Online (Sandbox Code Playgroud)

hasura react-admin

6
推荐指数
1
解决办法
731
查看次数

React-admin:如何从 AppBar 隐藏刷新按钮?

我正在创建基于 react-admin 的 admin ui,目前正在寻找一种解决方案来隐藏AppBar. 禁用导出按钮很简单 ( exporter={false})。RefreshButton 有什么同样简单的东西吗?我找不到任何有效的解决方案。

我的 React-admin 版本:2.9.3

我知道您可以使用List组件上的“动作”道具自定义动作,但这似乎已经过时,因为刷新按钮已移至应用栏..

AppBar如果需要,我可以将代码提供给我的自定义。

admin-on-rest react-admin

6
推荐指数
1
解决办法
3210
查看次数

React-admin:如何实现自动保存/后台保存功能?

如何使用 react-admin 实现自动保存/后台保存功能?

我在编辑富文本输入字段时想要一个功能,例如富文本,后台保存会将我的文本推送到服务器,而无需触摸我的焦点和编辑位置。

我尝试使用 EditController 和 SimpleFrom,这将重新渲染表单并从服务器获取记录器,并失去焦点和编辑位置。请问有什么例子或建议吗?

redux-form react-admin

6
推荐指数
1
解决办法
150
查看次数