react-admin：从 bulkActions 访问 <List/> 条记录

Question

文档指出 bulkActions 不获取列表组件的选定记录，仅获取选定的 ID，但我需要从 bulkActionsButtons 的按钮点击处理程序检查每个选定记录中的特定字段。

关于如何实现这一点有什么想法吗？

Answer 1

好的，这就是我所做的并且有效。 render prop 和 ref 的组合。如果有人有更好的想法，请告诉我。

import React, {Component} from 'react';
import {
    List,
    Datagrid,
    TextField,
    Button
} from 'react-admin';

class MyBulkButtons extends Component {
    handleClick = () => {
        const {getSelectedRecords} = this.props;
        const records = getSelectedRecords();
        const selectedRecords = records.filter(i => i.title === 'Extra action!');

        this.processExtraActions(selectedRecords);
    };

    processExtraActions(selectedRecords) {
        //...
    }

    render() {
        return (
          <Button onClick={this.handleClick} label={"Check for extra actions"}/>
        );
    }
}

export class MyList extends Component {
    constructor(props) {
        super(props);
        this.myDataGrid = React.createRef();
    }

    getSelectedRecords() {
        const gridProps = this.myDataGrid.current.props;

        return gridProps.selectedIds.map(id => gridProps.data[id]);
    }

    render() {
        return (
          <List {...this.props}
                bulkActionButtons={<MyBulkButtons getSelectedRecords={this.getSelectedRecords.bind(this)}/>}>

              <Datagrid ref={this.myDataGrid}>
                  <TextField source="id"/>
                  <TextField source="title"/>
              </Datagrid>
          </List>
        );
    }
}

Answer 2

我使用了传递给 List 组件的 aside 属性。您基于 ref 的解决方案对我不起作用。

https://marmelab.com/react-admin/List.html#aside-component

检查以上内容link。作为 aside 道具传递给 List 组件的组件接收 selectedIds and the data 作为道具的一部分。

Answer 3

只是为了扩展@Sudharsan-Ravikumar 的回答，ref 解决方案在我的情况下也不起作用（react-admin 3.14.1，主要使用类而不是函数+挂钩）。我是这样用的aside...

import React, {Fragment} from 'react';
import {List, Datagrid, TextField, useListContext} from 'react-admin';
import Button from '@material-ui/core/Button';
import AccountTreeIcon from '@material-ui/icons/AccountTree'

import dataProvider from './dataProvider';

export class MyList extends React.Component {

    list = null

    handleStartMyTask = async () => {
        if (!this.list || !this.list.ids || this.list.ids.length===0) return;
        // console.log(`LIST DATA:`, this.list.data)

        try {
            const result = await dataProvider.doMyRemoteTask(this.list.data)
            console.log(result)
        }
        catch(err) {
            console.log()
        }

    }


    /** 
     * This was the only way i could figure out how to get the list details.
     * That is, the props you get access to when you do useListContext().
     * Refs didn't work.
     */
    Aside = () => {
        this.list = useListContext()
        // We don't actually want an aside component for the list.
        return null;
    }


    render = () => {
        return <Fragment>

            /* A little card outside the list with some useful buttons */
            <div class="card">
                <Button 
                    variant="outlined" color="primary" size="medium"  
                    onClick={this.handleStartMyTask}
                >
                    <AccountTreeIcon/>&nbsp;&nbsp;Start my task now!
                </Button>
            </div>

            <List {...this.props} aside={<this.Aside/>} >
                <Datagrid>
                    <TitleField source="title" />
                </Datagrid>
            </List>

        </Fragment>
    }

}

hooks dorks 可能是绝对的异端，但生命是短暂的！

react-admin：从 bulkActions 访问 <List/> 条记录

react-admin: Access <List/> records from bulkActions

bulk

react-admin