选择自动完成选项 - 自定义

Question

我在我的项目中使用material ui autocompolete。代码如下

<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}
        renderOption={(props, partner) => (
          <PartnerOption key={partner.id} partner={partner} {...props} />
        )}
      />

所选选项需要按以下格式显示

[name]

[type]

它应该看起来像附图

我不确定如何使用自动完成属性来实现这一点。我尝试了

renderInput

属性，但不确定如何在文本字段中显示 name 和 type。

任何帮助将不胜感激。

Answer 1

我认为你们真的很亲密。

getOptionLabel

签名是：

function(props: object, option: Value, state: object, ownerState: object) => ReactNode

（参见API）

因此您需要将

getOptionLabel

属性更改为：

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