Question

我尝试基于react-admin实现一个管理ui。现在，我有多个资源，它们具有相同的过滤条件。在所有资源之间同步过滤器的最佳方法是什么？

试图设置filterDefaultValues过滤器。尽管试图将相同的筛选器组件分配给多个资源。

我真的不知道如何将“ YourFilter”与“ MyFilter”同步。预期：您在MyData上，基于/ apples设置过滤器。切换到YourData之前，应预先选择过滤器。

如何实现？

// in src/mydata.js
const MyFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput label="Apple" source="appleid" reference="apples" allowEmpty alwaysOn>
            <SelectInput optionText="applename" />
        </ReferenceInput>
    </Filter>
);

export const MyDataList = (props) => (
    <List {...props} title="My Data" filters={<MyFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
);

// in src/yourdata.js
const YourFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput label="Apple" source="appleid" reference="apples" allowEmpty alwaysOn>
            <SelectInput optionText="applename" />
        </ReferenceInput>
    </Filter>
);

export const YourDataList = (props) => (
    <List {...props} title="Your Data" filters={<YourFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
);

// in src/App.js
const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="MyData" list={MyDataList} />
    <Resource name="YourData" list={YourDataList} />
  </Admin>
);

Answer 1

如果MyFilter和YourFilter严格相同，则可以对两者使用相同的过滤器组件。

// filters.js
export const CustomFilter = (props) => (
    <Filter {...props}>
        <ReferenceInput label="Apple" source="appleid" reference="apples" allowEmpty alwaysOn>
            <SelectInput optionText="applename" />
        </ReferenceInput>
    </Filter>
);

// ResourceA.js
import { CustomFilter } from './filters';

export const ResourceAList = (props) => (
    <List {...props} title="My Data A" filters={<CustomFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
);

// ResourceB.js
import { CustomFilter } from './filters';

export const ResourceBList = (props) => (
    <List {...props} title="My Data B" filters={<CustomFilter />}>
        <Datagrid>
        // ...
        </Datagrid>
    </List>
);

// in src/App.js
import { ResourceAList } from './ResourceA';
import { ResourceBList } from './ResourceB';

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="MyDataA" list={ResourceAList} />
    <Resource name="MyDataB" list={ResourceBList} />
  </Admin>
);

在react-admin上为多个资源设置全局过滤器的最佳方法是什么？

1 个答案: