如何仅导出 react-admin 列表中的选定项目？答案

【问题标题】：How can I export only the selected items in a list in react-admin?如何仅导出 react-admin 列表中的选定项目？
【发布时间】：2019-11-01 20:05:22
【问题描述】：

如何在 react-admin 中仅导出列表中的选定项目？

我们知道ExportButton 可以创建一个 CSV 文件，但只能创建整个列表（使用当前过滤器和排序）。它can't be used 用于列表中的选定项目。

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

我已经复制了 react-admin 的 this BulkDeleteButton。我从中删除了可撤消的功能、crudDeleteMany 操作和红色样式。我添加的是以下组合：

使用提供的导出器函数
带有回调的自定义 crudGetMany 操作，使用返回的数据（有效负载）调用提供的导出器函数

结果称为BulkExportButton。它是全新 repo ra-extensions 的第一个组件。我推荐你安装它（yarn add ra-extensions）然后你就可以开始使用了。

用法

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Datagrid, downloadCSV, List, TextField } from 'react-admin';
import { unparse as convertToCSV } from 'papaparse/papaparse.min';
import { BulkExportButton } from '../../../common/components';

const exporter = data => {
    const csv = convertToCSV({
        data,
        fields: ['id', 'b', 'c'],
    });
    downloadCSV(csv, 'somelist'); // download as 'somelist.csv` file
};

const BulkActionButtons = ({ resource, selectedIds }) => (
    <Fragment>
        <BulkExportButton
            resource={resource}
            selectedIds={selectedIds}
            exporter={exporter}
        />
    </Fragment>
);
BulkActionButtons.propTypes = {
    resource: PropTypes.string,
    selectedIds: PropTypes.array,
};

const SomeList = props => (
    <List
        {...props}
        bulkActionButtons={<BulkActionButtons />}
        exporter={exporter}
    >
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="b" />
            <TextField source="c" />
        </Datagrid>
    </List>
);

export default SomeList;

前往ra-extensions 获取有关该组件及其使用方法的反馈。

【讨论】：