<ReferenceInput /> 不显示之前选择的项目只是因为 optionValue 设置为“id”以外的值

Question

这是我的组件：

<ReferenceInput
      alwaysOn
      label="Start Code"
      source="start_code"
      reference="products"
      sort={{ field: "products.code", order: "ASC" }}
      perPage={10}
      enableGetChoices={({ code }) => {
        return !!code;
      }}
    >
      <AutocompleteInput
        optionValue="code" // <= because of this attribute
        optionText="code"
        variant="outlined"
        filterToQuery={(searchText) => {
          return { code: searchText };
        }}
      />
</ReferenceInput>

我将该组件放入数组中作为

<List />

组件的过滤器。

从开始代码中选择一个项目后，我进入其他菜单，然后返回。

因为

<List />

的默认行为是将列表参数（排序、分页、过滤器）存储在 localStorage 中，以便用户可以返回列表并以与离开时相同的状态找到它，我们期望之前选择的内容每当用户返回组件时，Start Code组件中的项目都会自动再次选择，但事实并非如此。

我发现了，这是因为我将

optionValue

属性设置为“code”，而默认值为“id”

如果我删除这一行

optionValue="code"

它会起作用

有人知道如何解决这个问题吗？谢谢

Answer 1

要解决将

ReferenceInput

属性设置为“code”时 React-admin 列表过滤器中

optionValue

组件的问题，您可以使用

getOptionValue

组件的

AutocompleteInput

属性来指定一个自定义函数从所选选项中提取值。方法如下：

<ReferenceInput
  alwaysOn
  label="Start Code"
  source="start_code"
  reference="products"
  sort={{ field: "products.code", order: "ASC" }}
  perPage={10}
  enableGetChoices={({ code }) => {
    return !!code;
  }}
>
  <AutocompleteInput
    optionText="code"
    variant="outlined"
    filterToQuery={(searchText) => {
      return { code: searchText };
    }}
    getOptionValue={(option) => option.code} // Use a custom function to extract the value
  />
</ReferenceInput>