Question

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

...
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动作，但是我找不到任何地方的例子。

Answer 1

基于评论和另一个问题中提供的信息：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个参数传递给处理副作用的数据提供程序。

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

1 个答案: