Как отменить выбор элементов списка в кнопках реагирования администратора для групповых действий - PullRequest
0 голосов
/ 07 января 2019

У меня есть реактивный проект администратора и я реализовал пользовательскую кнопку для представления списка, переданного в атрибут 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>;
  }
});

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Решение состоит в том, чтобы вызвать массовую вспомогательную функцию из реагирующего администратора:

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

0 голосов
/ 07 января 2019

Установите некоторые метаданные для каждого щелчка флажка, чтобы он вставлял в массив значения true или false, например:

listData = {
   ...
   isChecked : true
}

Затем внутри функции, которая обрабатывает массовые операции, добавьте [listData].filter( ), (фильтр lodash работает быстрее), чтобы проверить и посмотреть, какой isChecked === true, а затем установите для них значение false и обновите атрибут value={bool} в флажок ввода тега.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...