时间戳

首页 > 解决方案 > 如何使用 React-Admin 在 List 组件中创建自定义记录操作按钮？

react-admin - 如何使用 React-Admin 在 List 组件中创建自定义记录操作按钮？

问题描述

我是 React 和 React-Admin 的新手。恕我直言，我正在尝试实现许多人必须已经完成的简单事情，但我在任何地方都找不到任何类型的教程。

我想在<List>组件的每一行内的操作按钮列表（显示/编辑）中添加另一个按钮。此按钮将存档记录。

具有 4 个操作按钮的用户列表

我的最后一次尝试看起来像下面的代码。

import React from 'react';
import {
  Datagrid,
  EmailField,
  List,
  TextField,
  ShowButton,
  EditButton,
  DeleteButton,
  CloneButton,
} from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';
import ArchiveIcon from '@material-ui/icons/Archive';

const useRowActionToolbarStyles = makeStyles({
    toolbar: {
        alignItems: 'center',
        float: 'right',
        width: '160px',
        marginTop: -1,
        marginBottom: -1,
    },
    icon_action_button: {
      minWidth: '40px;'
    },
});

const ArchiveButton = props => {
  const transform = data => ({
    ...data,
    archived: true
  });

  return <CloneButton {...props} transform={transform} />;
}


const RowActionToolbar = (props) => {
  const classes = useRowActionToolbarStyles();
  return (
      <div className={classes.toolbar}>
        <ShowButton label="" basePath={props.basePath} record={props.record} className={classes.icon_action_button}/>
        <EditButton label="" basePath={props.basePath} record={props.record} className={classes.icon_action_button}/>
        <ArchiveButton {...props} basePath={props.basePath} label="" icon={<ArchiveIcon/>} record={props.record} className={classes.icon_action_button} />
        <DeleteButton basePath={props.basePath} label="" record={props.record} className={classes.icon_action_button}/>
      </div>
  );
};

export const UserList = props => {
  return (
    <List
      {...props}
      sort={{ field: 'first_name', order: 'ASC' }}
    >
      <Datagrid>
        <TextField source="first_name"/>
        <TextField source="last_name"/>
        <EmailField source="email"/>
        <RowActionToolbar/>
      </Datagrid>
    </List>
  )
};

显然，此代码不起作用，因为<CloneButton>组件摆脱id了记录。此外，除非我做错了什么——这完全有可能——它会向端点发出GET请求。create我在我dataProvider 的（后端使用 Django 和 Django rest 框架）中使用了不同的路由。我想向PATCH详细端点发送一个，就像<Edit>组件一样。

我也试过 a <SaveButton>，但它也失败了。

未捕获的类型错误：无法在 useSaveContext 处读取未定义的属性“保存”（SaveContext.js:23）

我猜<SaveButton>必须在一个<SimpleForm>?

我想要 的保存行为<DeleteButton>，即更新列表中的记录，显示记录已存档的通知（使用撤消链接），将请求发送到后端，刷新列表。

任何指导，方向将不胜感激。

标签： react-admin

解决方案

我不知道这是一个完整的答案，但感觉不仅仅是评论......

您正在尝试存档现有记录，而不是创建全新的记录，对吗？CloneButton 应该用于创建具有新 ID 的新记录（这就是您的 ID 消失的原因），因此您不想在这里使用它。请注意，我从未使用过 CloneButton。它没有完全记录，所以我对它的使用可能是错误的。

我认为您应该使用存档按钮中的 useRecordContext 挂钩来提取所有记录的数据，包括 id；阅读这个小部分：https ://marmelab.com/react-admin/Architecture.html#context-pull-dont-push

而且我不认为转换是你在这里寻找的。您将需要使用 dataProvider 挂钩之一，我假设 useUpdate：https ://marmelab.com/react-admin/Actions.html#useupdate

推荐阅读