反应管理员:执行某些操作后清除selectedIds

时间:2019-07-03 18:31:37

标签: reactjs redux react-admin

所以我有一个像这样的组件:

...
import dataProvider from 'myCustomDataProvider';

class Something extends React.Component {
  somethingBulk(selectedIds) {
    await dataProvider(SOMETHING, 'something', {
      data: { selectedIds },
    })
    this.props.refreshView();
  }

  render() {
    const props = this.props;

    return (
      <List 
        {...props} 
        bulkActions={<BulkActionsBar onConfirm={this.somethingBulk} />}
        filters={null} 
        exporter={false}
      >
        <Datagrid>...</Datagrid>
      </List>
    );
  }
}

export default compose(
  connect(
    null,
    {
      showNotification,
      refreshView,
      fetchStart,
      fetchEnd,
    }
  ),
)(Something);

BulkActionsBar是一个简单的组件,带有一个按钮,供onClick调用somethingBulk。 现在,行this.props.refreshView()刷新列表,获取新记录,一切正常。除了复选框保持选中状态之外,selectedIds仍保留其值。

问题是,清除该列表的正确方法是什么?我知道我必须调度一些redux动作,但是我找不到任何地方的例子。

1 个答案:

答案 0 :(得分:0)

基于评论和另一个问题中提供的信息:How to unselect checkboxes after bulk action execution?,我能够使其正常工作。

import { withDataProvider } from 'react-admin';

class Something extends React.Component {
  somethingBulk(selectedIds) {
    const { dataProvider } = this.props;
    await dataProvider(SOMETHING, 'something', {
      data: { selectedIds },
    }, {
      onSuccess: {
        refresh: true,
        unselectAll: true,
      },
      onFailure: {
        unselectAll: true,
        notification: { level: 'warning' },
      },
    });

  }

  render() {
    const props = this.props;

    return (
      <List 
        {...props} 
        bulkActions={<BulkActionsBar onConfirm={this.somethingBulk} />}
        filters={null} 
        exporter={false}
      >
        <Datagrid>...</Datagrid>
      </List>
    );
  }
}

export default withDataProvider(Something);

确保您使用的是最新版本的react-admin,我使用的是旧版本,没有导出withDataProvider。因此,您可以将第4个参数传递给处理副作用的数据提供程序。