Как сбросить значения фильтра в реагировать администратора рамки? - PullRequest
Новая
       78

Как сбросить значения фильтра в реагировать администратора рамки?

0 голосов
/ 22 октября 2018

У меня есть компонент фильтра: 

export const PostsFilter = (props) => (
  <Filter {...props}>
    <TextInput label='Post ID' source='id' alwaysOn />
    <TextInput label='User ID' source='user_id' alwaysOn />
  </Filter>
);

Мне нужно добавить кнопку сброса, которая очистит входные значения.Я понимаю, что это нужно сделать, отправив что-то в редукс.Так может кто-нибудь уже решил эту проблему?Спасибо!

Ответы [ 4 ]

0 голосов
/ 15 августа 2019 

const PostActions = ({
  bulkActions,
  basePath,
  currentSort,
  displayedFilters,
  exporter,
  filters,
  filterValues,
  onUnselectItems,
  resource,
  selectedIds,
  showFilter,
  total,
  setFilters,
}) => (
  <CardActions>
    {/* Add your custom actions */}
    <Button variant="text" onClick={() => setFilters({})}>
      Clear Filters
    </Button>
    {bulkActions &&
      React.cloneElement(bulkActions, {
        basePath,
        filterValues,
        resource,
        selectedIds,
        onUnselectItems,
      })}
    {filters &&
      React.cloneElement(filters, {
        resource,
        showFilter,
        displayedFilters,
        filterValues,
        context: 'button',
      })}
    <ExportButton
      disabled={total === 0}
      resource={resource}
      sort={currentSort}
      filter={filterValues}
      exporter={exporter}
    />
  </CardActions>
); 

<List
    {...props}
    filters={<LeadTimeFilter />}
    bulkActions={false}
    actions={<PostActions />}
  >
Вы можете добавить кнопку сброса в действия. В действии можно получить метод setFilters, который может сбрасывать фильтры из реквизита.
0 голосов
/ 01 ноября 2018

В компоненте фильтра есть setFilters опора, вы можете использовать его: 

export const PostsFilter = (props) => (
  <div>
    <Filter {...props}>
      <TextInput label='Post ID' source='id' alwaysOn />
      <TextInput label='User ID' source='user_id' alwaysOn />
    </Filter>
    <Button onClick={() => props.setFilters({
          id: '',
          user_id: ''
     })}>Clear fields</Button>
  <div>
);
0 голосов
/ 30 мая 2019

К сожалению, setFilters ничего не делает для меня.Вот решение проблемы: 

<FormDataConsumer form={'filterForm'} alwaysOn source='stateId'>
      {({ formData, dispatch, ...rest }) => (
        <ReferenceInput
          resource={props.resource}
          source='stateId'
          reference='states'
          onChange={value => {
            dispatch(change('filterForm', 'districtId', null));
          }}
          allowEmpty>
          <SelectInput optionText='name' />
        </ReferenceInput>
      )}
    </FormDataConsumer>

    {(props.filterValues.stateId || props.filterValues.districtId) && (
      <ReferenceInput
        key={props.filterValues.stateId}
        source='districtId'
        reference='districts'
        filter={{ stateId: props.filterValues.stateId }}
        alwaysOn>
        <SelectInput optionText='name' />
      </ReferenceInput>
    )}
0 голосов
/ 31 октября 2018

Звучит так, будто вы хотите очистить значение в TextInput, которое не нуждается в избыточном просмотре того, что вы нам дали.

Один из подходов, который нужно использовать, - это сохранение входных данных фильтра в состояние с помощью функции onChange() - возможно, именно здесь вы также вызываете действие, чтобы запустить бэкэнд или изменить состояние для сообщений, которые находятся в вашемprops.

Для сброса у вас может быть другая кнопка, которая в onClick() вызывает handleReset(inputId), которую вы можете вызвать setState({filterUser: 'testUser123'}), которая будет выполнять то, что вы просите.

Хотя это зависит от того, как вы хотите справиться со всем этим, недостаточно информации, чтобы увидеть, как вы это делаете, поэтому я просто рассуждаю о том, как люди поступают.

...