Admin-on-rest列表批量操作选中无响应问题求助

嘿，我看到你在Admin-on-rest的List组件里配置批量操作时，遇到了选中行后没有任何显示的问题，这大概率是Datagrid的配置有误导致的，我来帮你排查并修正代码：

问题出在哪？ #

你给Datagrid传了headerOptions、bodyOptions、rowOptions这些属性，但这些并不是Admin-on-rest中Datagrid组件的合法props，这些属性可能是你混淆了其他UI库的用法，这会直接导致行选择功能无法正常触发。另外，要启用批量选择，你还需要在Datagrid里显式添加复选框列。

正确的实现方式 #

我把修正后的代码和关键点列出来：

1. 添加内置的复选框列：在Datagrid的列列表最前面加入<CheckboxColumn />，这是Admin-on-rest专门用来实现行选择的内置组件，没有它的话，批量选择的复选框根本不会显示。
2. 移除无效属性：删掉那些Datagrid不识别的headerOptions、bodyOptions等属性，Datagrid会自动和List的bulkActions配合完成交互。
3. 确认组件导入正确：确保你已经导入了所有需要的组件，包括CheckboxColumn。

修正后的完整代码 #

// 先确认导入了所有需要的组件
import { List, Datagrid, DateField, NumberField, BulkActions, BulkDeleteAction, CheckboxColumn } from 'admin-on-rest';
// 替换成你实际的组件路径
import { TypeLabel, GenderLabel } from './your-components';

const AccountingBulkActions = props => (
    <BulkActions {...props}>
        <BulkDeleteAction />
    </BulkActions>
);

export const AccountingList = (props) => (
    <List {...props} bulkActions={<AccountingBulkActions />} title="Accounting">
        <Datagrid>
            {/* 必须把CheckboxColumn放在列的最前面 */}
            <CheckboxColumn />
            <DateField source="createdAt" />
            <TypeLabel source="type" />
            <GenderLabel source="gender" />
            <NumberField source="paymentPrice" />
            <NumberField source="totalPrice" />
        </Datagrid>
    </List>
);

额外小提示 #

• 添加<CheckboxColumn />之后，Datagrid会自动在每行显示复选框，顶部也会出现全选按钮，选中行后批量操作栏就会自动显示出来啦。
• 如果之后需要加更多批量操作（比如批量导出、批量修改状态），直接在BulkActions组件里添加对应的自定义操作组件就行。

内容的提问来源于stack exchange，提问作者Ali Hesari