Question

文档指出，bulkActions不会获得List组件的选定记录，而只是获得选定的ID，但是我需要从bulkActionsButtons的按钮单击处理程序中检查每个选定记录中的特定字段。

关于如何实现这一目标的任何想法？

Answer 1

好的，这就是我所做的，并且可以正常工作。渲染道具和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组件的道具。您基于ref的解决方案不适用于我。

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

检查以上链接。作为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>
    }

}

可能是勾引笨蛋的绝对异端，但生命是短暂的！

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

3 个答案: