Блог

У меня есть react-admin приложение с несколькими ресурсами списка, и я хотел бы очистить фильтр только при переключении между списками (переключение между компаниями/правилами/поисками). В настоящее время я использую решение, показанное RuleList.js для каждого списка (часть фильтра правил). Однако это также сбрасывает фильтр каждый раз, когда вы показываете/редактируете элемент в списке. Я не знаю, есть ли способ определить, когда вы нажимаете между компаниями/правилами/поисковыми запросами, который вы могли бы использовать для очистки фильтра.

App.js

 import * as React from "react"
import { Admin, Resource } from 'react-admin'

import dataProvider from './dataProvider'

import companies from './companies'
import rules from './rules'
import lookups from './lookups'

const App = () => (
  <Admin
    dataProvider={dataProvider}>
    <Resource name="companies" {...companies} />
    <Resource name="rules" {...rules} />
    <Resource name="lookups" {...lookups} />
  </Admin>
)

export default App
 

RuleList.js

 import React, { useState, useEffect } from 'react'
import { List, Datagrid, TextField, EditButton } from 'react-admin'

const RuleFilter = (props) => {
  useEffect(() => {
    const { setFilters } = props
    return () => setFilters({ regex: '' })
  }, [])

  return (
    <Filter {...props}>
      <TextInput label="Search" source="regex" alwaysOn />
    </Filter>
  )
}

const RuleList = (props) => {    
  return (
    <List {...props}
      filters={<RuleFilter />}
      exporter={false}>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="regex" />
        <EditButton />
      </Datagrid>
    </List>
  )
}

export default RuleList
 

index.js для Правила

 import RuleList from'./RuleList'
import RuleEdit from './RuleEdit'
import RuleCreate from './RuleCreate'

const rules = {
  list: RuleList,
  edit: RuleEdit,
  create: RuleCreate,
}

export default rules
 

Очистите поле поиска при выборе компаний или правил

1. Используйте redux-сохранение и сохраните свои фильтры в хранилище, ИЛИ
2. Используйте localStorage для сохранения ваших фильтров