代码之家  ›  专栏  ›  技术社区  ›  Robert Strauch

按引用字段react admin对列表排序

  •  0
  • Robert Strauch  · 技术社区  · 6 年前

    我开始使用 react-admin 基本上是可以工作的。但是我在使用 ReferenceField .

    我调用的RESTAPI返回以下JSON数据:

    /语言

    {
      "language": [
        {
          "id": 0,
          "name": "Language #0"
        },
        {
          "id": 1,
          "name": "Language #1"
        },
        {
          "id": 2,
          "name": "Language #2"
        },
        {
          "id": 3,
          "name": "Language #3"
        }
      ]
    }
    

    /MyRebug

    {
      "myreferences": [
        {
          "id": 0,
          "langauge": {
            "id": 0,
            "name": "Language #0"
          },
          "name": "My reference #0"
        },
        {
          "id": 1,
          "langauge": {
            "id": 1,
            "name": "Language #1"
          },
          "name": "My reference #1"
        },
        {
          "id": 2,
          "langauge": {
            "id": 2,
            "name": "Language #2"
          },
          "name": "My reference #2"
        }
      ]
    }
    

    这就是在React Admin中映射的方式。

    export const LanguageList = props => (
      <List
        title="Languages"
        sort={{ field: "name", order: "ASC" }}
        filters={<LanguageFilter/>}
        {...props}
      >
        <Datagrid>
          <NumberField source="id" label="ID" />
          <TextField source="name" label="Name" />
          <EditButton />
        </Datagrid>
      </List>
    ); 
    
    export const MyReferenceList = props => (
      <List
        title="My References"
        sort={{ field: "name", order: "ASC" }}
        filters={<MyReferenceFilter />}
        {...props}
      >
        <Datagrid>
          <NumberField source="id" label="ID" />
          <TextField source="name" label="Name" />
          <ReferenceField source="langauge.id" reference="language" label="Language">
            <TextField source="name" />
          </ReferenceField>
          <EditButton />
        </Datagrid>
      </List>
    );
    

    我的问题是引用显示正确,但是当我单击被引用语言名称的列时,react admin按语言的ID而不是其名称排序。

    我需要做些什么来适应按名称排序的工作?

    1 回复  |  直到 6 年前
        1
  •  1
  •   François Zaninotto    6 年前

    这个 <ReferenceField> 组件接受 sortBy prop,指定用于排序的字段,而不是 source . 所以在你的案例中,你可以写:

          <ReferenceField source="language.id" sortBy="language.name" reference="language" label="Language">
            <TextField source="name" />
          </ReferenceField>
    

    这在React管理文档中进行了解释:

    https://marmelab.com/react-admin/Fields.html#referencefield