在 Material ui 自动完成中自定义输入区域

Question

我正在使用 Material ui 自动完成功能来显示合作伙伴列表。选项如附图所示列出

如您所见，选项以格式列出

[name]

[type]  (displayed below the name)

现在，当选择一个选项时，我需要以 same 格式显示所选选项。

我尝试了以下方法

 getOptionLabel={(option) => (
    <div>
      <p>{option.name}</p>
      <p>{option.type}</p>
    </div>
 )})

但这不起作用，因为 getOptionLabel 预计会返回一个字符串。

目前代码如下

<AsyncAutocomplete
        field={form.$("partnerId")}
        fullWidth
        fetchOptions={store.getPartners}
        getOptionLabel={(option) => (
            <div>
              <p>{option.name}</p>
              <p>{option.type}</p>
            </div>
        )})
        isOptionEqualToValue={(option, value) => option.id === value.id}
        noOptionsText="Type to search"
        freeSolo={false}
        showOptionsOnOpen={false}
        renderOption={(props, partner) => (
          <PartnerOption key={partner.id} partner={partner} {...props} />
        )}
      />

关于如何实现这一目标有什么想法吗？

Answer 1

此代码片段可以帮助您 codesandbox 链接