如何在react admin自定义批量操作按钮中取消选择列表项
我有一个react管理项目，并为列表视图实现了一个自定义按钮，该按钮被传递到bulkActionButtons属性中，文档如下：https://marmelab.com/react-admin/List.html#bulk-action-buttons
const BulkUserActions = props => (
<MakeAdminButton {...props}/>
);
const UserList = props => (
<List {...props} bulkActionButtons={<BulkUserActions/>}>
<Datagrid rowClick="show">
<TextField source="id"/>
<EmailField source="email"/>
</Datagrid>
</List>
);MakeAdminButton处理点击并执行我需要的更新。缺少的部分是如何在操作完成后取消选择列表项。props.selectedIds是受保护的，因此在完成逻辑后，我无法简单地将其设置为空数组。
问题是如何取消设置props.selectedIds或其他在完成时取消选择列表项的方法。
const MakeAdminButton = withStyles(styles)(class MakeAdminButton extends React.Component {
handleAction = () => {
//does the stuff as required using this.props.selectedIds
//what to return to unset this.props.selectedIds
};
render () {
return <Button variant="contained"
color="primary"
onClick={this.handleAction}
<AdminIcon/>
</Button>;
}
});回答 3
Stack Overflow用户
发布于 2020-05-12 10:23:34
React Admin提供了这样做的方法。直接在v3上使用useUnselectAll，或者在useMutation、useUpdateMany和useDataProvider挂钩的onSuccess回调上。在v2上，使用withDataProvider装饰器的dataProvider第四个参数，或者将自定义redux操作的meta.onSuccess.unselectAll设置为true，或者自动使用crudUpdateMany，或者使用突变组件的options prop。
crudUpdateMany新闻的goto迈克·米勒将为您报道。
工作示例：
https://codesandbox.io/s/exciting-firefly-dd1ni?file=/src/App.js
v3：
const UnselectAllButtonV3Hook = props => {
const unselectAll = useUnselectAll();
return (
<Button
onClick={() => {
unselectAll(props.resource);
}}
>
Unselect all with v3 hook
</Button>
);
};https://marmelab.com/react-admin/doc/3.5/Actions.html#handling-side-effects-in-usedataprovider
useUpdateMany/useDataProvider/useMutation挂钩，onSuccess回调从useUnselectAll()调用unselectAll()
const MakeAdminButtonV3 = props => {
const refresh = useRefresh();
const unselectAll = useUnselectAll();
const [makeAdmin, { loading }] = useUpdateMany(
props.resource,
props.selectedIds,
{ isAdmin: true },
{
onSuccess: () => {
unselectAll(props.resource);
refresh();
}
}
);
//OR
const dataProvider = useDataProvider();
const makeAdmin2 = () => {
dataProvider.updateMany(
props.resource,
{ ids: props.selectedIds, data: { isAdmin: true } },
{
onSuccess: () => {
unselectAll(props.resource);
refresh();
}
}
);
};
//OR
const [makeAdmin3, { loading3 }] = useMutation(
{
type: "updateMany",
resource: props.resource,
payload: { ids: props.selectedIds, data: { isAdmin: true } }
},
{
onSuccess: () => {
unselectAll(props.resource);
refresh();
}
}
);
return (
<Button onClick={makeAdmin3} disabled={loading3}>
Make Admin with V3 dataProvider hooks
</Button>
);
};https://marmelab.com/react-admin/doc/3.5/Actions.html#usemutation-hook
https://marmelab.com/react-admin/doc/3.5/Actions.html#usedataprovider-hook
https://marmelab.com/react-admin/doc/3.5/Actions.html#specialized-hooks
V2示例也适用于v3，但突变和withDataProvider是遗留的，在直接使用dataProvider时会有很小的变化，因为v3上的dataProvider api发生了变化。
v2：
withDataProvider：
const UnmakeAdminButtonWithWithDataProvider = withDataProvider(
class extends React.Component {
handleClick = () => {
this.props.dataProvider(
UPDATE_MANY,
"users",
{ ids: this.props.selectedIds, data: { isAdmin: false } },
{ onSuccess: { unselectAll: true, refresh: true } }
);
};
render() {
return (
<Button onClick={this.handleClick}>
Unmake Admin with withDataProvider
</Button>
);
}
}
);https://marmelab.com/react-admin/doc/2.9/Actions.html#handling-side-effects
自定义redux操作：
import { connect } from 'react-redux';
const MAKE_ADMIN = "MAKE_ADMIN";
const makeAdmin = ids => ({
type: MAKE_ADMIN,
payload: { ids, data: { isAdmin: true } },
meta: {
fetch: UPDATE_MANY,
resource: "users",
onSuccess: { unselectAll: true, refresh: true }
}
});
const MakeAdminButtonWithCustomAction = connect(
null,
{ makeAdmin }
)(
class extends React.Component {
handleClick = () => {
this.props.makeAdmin(this.props.selectedIds);
};
render() {
return (
<Button onClick={this.handleClick}>
Make Admin With Custom Redux Action
</Button>
);
}
}
);https://marmelab.com/react-admin/doc/2.9/Actions.html#adding-side-effects-to-actions
突变组件：
const MakeAdminMutationV2 = props => (
<Mutation
type="updateMany" //{UPDATE_MANY}
resource={props.resource}
payload={{ ids: props.selectedIds, data: { isAdmin: true } }}
options={{
onSuccess: {
unselectAll: true,
refresh: true
}
}}
>
{approve => <Button onClick={approve}>Make admin with Mutation</Button>}
</Mutation>
);https://marmelab.com/react-admin/doc/2.9/Actions.html#query-and-mutation-components
Stack Overflow用户
发布于 2019-01-07 22:16:35
每次单击复选框时设置一些元数据，以便将true或false注入到数组中，如下所示：
listData = {
...
isChecked : true
}然后，在处理批量操作的函数中，添加一个[listData].filter( ) (lodash filter更快)，以检查和查看哪个isChecked === true，然后将它们设置为false，并更新checkbox input标记上的value={bool}属性。
Stack Overflow用户
发布于 2019-01-08 05:11:45
解决方案是从react admin调用一个批量助手函数：
class MakeAdminButton extends React.Component {
handleAction = () => {
const { basePath, crudUpdateMany, resource, selectedIds } = this.props;
//custom code goes in here...
//calling this function triggers the unset and closes the toolbar
crudUpdateMany(resource, selectedIds, { isAdmin: true }, basePath);
};
render () {
return <Button label="Make Admin" onClick={this.handleAction}>
<AdminIcon/>
</Button>;
}
};
const BulkUserActions = connect(undefined, { crudUpdateMany })(MakeAdminButton);
const UserList = props => (
<List {...props} bulkActionButtons={<BulkUserActions/>}>
<Datagrid>
<TextField source="id"/>
<EmailField source="email"/>
<BooleanField source="isAdmin" label="Admin" />
</Datagrid>
</List>
);如果我不厌其烦地阅读，这个页面上显示了一个示例：https://github.com/marmelab/react-admin/blob/master/docs/List.md#bulk-action-buttons
https://stackoverflow.com/questions/54075984
复制相似问题
腾讯云开发者
