标签: react-admin

如何将自定义组件的输出保存回 React Admin 模型？

我有一个带有一个自定义组件的表单，该组件是 CodeMirror 字段。对其他所有内容的更改均正确保存。但是我的 CodeMirror 字段虽然可以作为编辑器正常工作并按我想要的方式配置，但不会保存更改。

我是 React-Admin 的新手，并且对 React 的经验有限，所以我想我错过了一些基本的东西。

const handleChange = (field) => (val, evt) => {
  // I reach here with `field` set to the instance of MyEditField, with `val`
  // set to the updated editor value, and `evt` the CodeMirror event

  // But now how do I update the underlying record?

  // The following will update the stored copy, but doesn't mark it as a change 
  // to be saved by the …

我正在使用react-admin 作为管理界面。在编辑表单中，我想显示编辑后的值（只是为了了解如何捕获表单更改后的值，稍后将显示来自 api 的数据以获取这些更改后的值）。我的代码如下（简化）

const Aside = ({ record }) => {
  return (
    <div style={{ width: 200, margin: '1em' }}>
        <Typography variant="h6">Student details</Typography>
        <Typography variant="body2">
        {record && (
            <Typography variant="body2">
                {//Will Show current ArrayInput values here, Name/role of current students}
            </Typography>
        )}
        </Typography>
    </div>
)};

export const MyEdit = (props) => (
  <Edit aside={<Aside />} {...props}>
      <SimpleForm>
        <ArrayInput source="students">
                <SimpleFormIterator>
                  <TextInput source="name" /
                  <NumberInput source="role" />
                </SimpleFormIterator>
              </ArrayInput>
      </SimpleForm>
  </Edit>
);

如何更新 ArrayInput 值的 onchange 之外的内容？

我需要使用react-admin 构建一个复杂的编辑表单。该表单有各种是/否滑块，由react-admin 的 BooleanInput 组件制作。如果用户将滑块设置为“是”，则应动态显示更多表单字段，这些字段在主题上引用滑块。如何查询 BooleanInput 组件的状态，或者该任务是否可以以不同的方式在 React 中解决？

<BooleanInput source="yesno" label="show or hide fields" />
<AutocompleteArrayInput source="probably_hidden1" label="show or hide me" choices={[
        { id: 'one', name: '1' },
        { id: 'two', name: '2' },
        { id: 'three', name: '3' }
]} />
<TextInput multiline source="text" label="show or hide me too" />

我正在尝试在 中创建一个动态按钮react-admin。
对于每个按钮，它都会点击一个唯一的地址，我该怎么做？

不幸的是，我有这个错误：props.username is undefined。

export const LoginCredentialList = (props) => (
  <List {...props} pagination={<PostPagination/>}>
    <Datagrid>
       <TextField label="Username" source="username" />
       <Button label="Re-invoke Login"
          onClick={() => {       
            axios.get("http://localhost:8080/admin/" + somehow_read_username_here)
                 .then((res)=>console.log(res));
             }}
        />
    </Datagrid>
  </List>
);

这是parent调用或使用上述组件的地方：

class SPanel extends React.Component {
  render() {
    return (
      <div>
        <Admin dataProvider={restDataProvider}>
          <Resource name="loginCredential" list={LoginCredentialList} />
            ...

我一直在使用 React-Admin v2，现在是时候升级到下一个主要版本了。我的应用程序具有在页面加载时更改登录页面语言的功能，例如根据网址参数。如果没有设置任何参数，则语言将为英语，但如果 URL 为 myproject.tld/login/fi，则语言将为芬兰语。通过使用动作创建者componentDidMount分派动作来更改语言。CHANGE_LOCALEchangeLocale

但是，我已阅读升级指南，它说翻译系统将不再以相同的方式工作，它不再使用 redux。我已经能够熟悉新系统，并且我设法创建了语言更改按钮，并且它起作用了。创建语言环境切换器函数并useSetLocale在其中使用钩子很容易。

但是，我仍然遇到这样的情况：必须在没有任何用户操作（即单击按钮）的情况下即时更改语言。如果我无法根据用户点击并登陆网站的链接翻译登录页面，我可以接受这个事实。默认是英语，如果用户想查看其他语言的登录表单，我可以在右上角创建语言链接。

更重要的还是在用户登录后更改UI语言。每个用户都将他们选择的语言保存到后端的用户对象中，成功登录后我的 React 应用程序就知道语言代码。

主要问题：如何在登录后并且加载所有内容后更改语言？如果我理解正确，则钩子不能在componentDidMount. 我目前知道的更改语言的方法是 1. 挂钩useSetLocale和 2. 在文件中初始化它，App.js如下所示：

import * as React from "react";
import { Admin, Resource } from 'react-admin';
import polyglotI18nProvider from 'ra-i18n-polyglot';
import jsonServerProvider from 'ra-data-json-server';
import UserList from './users';
import englishMessages from 'ra-language-english';
import finnishMessages from 'ra-language-finnish';

const messages = {
    fi: finnishMessages,
    en: englishMessages,
};

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const i18nProvider …

我使用反应管理和打字稿。
我更喜欢使用strict类型检查。所以当我运行时tsc，react admin 向我显示一个implicitly any错误。
虽然我用了"skipLibCheck": true，但是还是报错了。我该如何修复它？

node_modules/ra-core/src/auth/useCheckAuth.ts:101:26 - error TS7006: Parameter 'error' implicitly has an 'any' type.

101 const getErrorMessage = (error, defaultMessage) =>
                             ~~~~~

下面是我的 tsconfig 文件。

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "paths": {
      "@components/*": ["components/*"],
      "@styles/*": ["styles/*"],
      "@lib/*": ["lib/*"],
      "@pages/*": ["pages/*"] …

我们有一个显示统计信息的仪表板，类似于海报丰富的react-admin演示（https://marmelab.com/react-admin-demo/#/）。

我们希望找到一种方法来允许用户将小部件拖动到自定义配置中。

关于用于拖放的反应库有什么想法可以很好地解决这个问题吗？

谢谢

我只是希望我的所有管理页面都在/admin.

<Admin
  title="Admin"
  dashboard={Dashboard}
  dataProvider={restClient}
  history={history}
>
  <Resource
    name="users"
    list={UserList}
  />
</Admin>

我的主页面位于/admin,但当我单击侧边栏中的用户时,它会更改路径/users而不是/admin/users.

我正在使用react-admin 2.0.0.

例如，当我打开需要获取资源的页面时，我需要<BackButton />在inact-admin中实现一个。showlist

你能指导我实施吗？我不熟悉react-admin路由机制。现在，我在edit表单actions道具中使用此组件：

const MyActions = ({ basePath, data, resource }) => (
    <CardActions>
        <ShowButton basePath={basePath} record={data} />
        <CloneButton basePath={basePath} record={data} />
        {/* Need <BackButton /> here */}
    </CardActions>
);

export const BookEdit = (props) => (
    <Edit actions={<MyActions />} {...props}>
        <SimpleForm>
            ...
        </SimpleForm>
    </Edit>
);

我想让 Datagrid 带有Delete如下按钮（图片是从 stackoverflow.com 复制的）：

我阅读了 react-admin 文档，但没有找到任何Delete在行上添加按钮的提示。任何身体知道如何？

谢谢，