Reactjs 如何在react admin自定义批量操作按钮中取消选择列表项

我有一个react admin项目，并为传递到

bulkActionButtons

属性的列表视图实现了一个自定义按钮，如以下文档所述：

---

每次单击复选框时设置一些元数据，以便将true或false注入数组，如：

listData = {
   ...
   isChecked : true
}

---

然后在处理批量操作的函数中，添加一个

[listData].filter（）

，（lodash filter更快），以检查并查看哪个

isChecked===true

，然后将它们设置为false，并更新checkbox输入标记上的

value={bool}

属性

解决方案是从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>
);

类MakeAdminButton扩展React.Component{
手工过滤=（）=>{
const{basePath，crudUpdateMany，resource，selectedIds}=this.props；
//自定义代码放在这里。。。
//调用此函数将触发取消设置并关闭工具栏
crudUpdateMany（资源，selectedId，{isAdmin:true}，basePath）；
};
渲染（）{
返回
React Admin提供了执行此操作的方法。在v3上，直接使用useUnselectAll或在useMutation、useUpdateMany和useDataProvider钩子的onSuccess回调上。在v2上，使用dataProvider的第四个参数withDataProvider decorator或将meta.onSuccess.unselectAll设置为true以执行自定义redux操作，或自动使用crudUpdateMany或options突变成分的性质

对于带有crudUpdateMany的v2，
goto
Mike Miller回答

工作实例：


v3：




V2示例也适用于v3，但由于v3上的dataProvider api发生了变化，所以在直接使用dataProvider时只做了一点小小的更改，而Variation和withDataProvider是遗留的


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>
      );
    }
  }
);

const unmakeAdminButtonWithDataProvider=withDataProvider(
类扩展了React.Component{
handleClick=（）=>{
this.props.dataProvider(
更新了很多，
“用户”，
{ids:this.props.selectedIds，数据：{isAdmin:false}，
{onSuccess:{unselectAll:true，refresh:true}
);
};
render（）{
返回(
使用withDataProvider取消管理
);
}
}
);


自定义重复操作：

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>
      );
    }
  }
);

从'react redux'导入{connect}；
const MAKE_ADMIN=“MAKE_ADMIN”；
const makeAdmin=ids=>({
类型：MAKE_ADMIN，
有效负载：{id，数据：{isAdmin:true}}，
元：{
获取：更新\u许多，
资源：“用户”，
onSuccess:{unselectAll:true，refresh:true}
}
});
const MakeAdminButtonWithCustomAction=connect(
无效的
{makeAdmin}
)(
类扩展了React.Component{
handleClick=（）=>{
this.props.makeAdmin（this.props.selectedIds）；
};
render（）{
返回(
使用自定义Redux操作进行管理
);
}
}
);


突变成分：

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>
);

const MakeAdminMutationV2=props=>(
{approve=>Make admin with Mutation}
);

谢谢Joe，但在react admin中，我不负责设置选中的数组，这是由该组件处理的。自定义操作接收选定的EDID数组，但无权取消设置。我正在查看react admin List.bulkActionButtons的API。我发现了这一点，需要调用帮助函数
crudUpdateMany
执行更新。这会触发对redux存储的更改并取消程序。抱歉，但愿我能帮上忙……我至少给了它上大学的机会。感谢你的帮助-比我从react管理员那里得到的帮助要多。如果你找到了，请小心，我会在这里为你留心的。
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>
  );
};

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>
      );
    }
  }
);

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>
      );
    }
  }
);

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>
);