在 MUI 的 AutoComplete 中使用 renderOption

Question

今天我带着一个过去几天一直困扰我的问题来找你。

我正在尝试使我的自动完成功能在选项中显示一个标签，但值不同。所以我用谷歌搜索了一下，发现你可以用 renderOption 来做到这一点。 所以我尝试了 renderOption，但我根本无法让它工作，并且它向我抛出了一个我不明白的错误。

我的代码如下：

    const itemList = [
        { value: "Car Winner", id: "casinofob" },
        { value: "PD 556", id: "-2084633992" },
        { value: "Cluckin Drink", id: "cbdrink" },
        { value: "Blink", id: "spellbook-blink" },
    ];

                        <Autocomplete
                          disablePortal
                          id="combo-box-demo"
                          options={itemList}
                          renderOption={option => <>{option.value}</>}
                          getOptionLabel={(option) => option.id}
                          sx={{ width: 300 }}
                          renderInput={(params) => <TextField onChange={updateSpawnEnteredItem} label="Item Name" sx={{marginBottom: '15px', marginTop:'5px', width: 300 }} {...params} />}
                    />

我收到的错误如下：““HTMLAttributes”类型上不存在属性“值”

如果有人可以帮助我解决这个错误，我将永远感激不已，因为我已经遇到这个问题好几天了。

问候。

Answer 1

您需要传递 props 并返回一个

li

元素。

这是一个更复杂的示例，其中选项有两个属性：

interface AcOption {code: string, description: string}

<Autocomplete
  multiple
  id="ac-field-id"
  autoComplete={true}
  options={acOptions || []}
  loading={acOptionsLoading}
  filterSelectedOptions={true}
  groupBy={(option) => option?.code?.[0] || ''}
  isOptionEqualToValue={(option: AcOption, value: AcOption) => option.code === value.code}
  onInputChange={(event, newInputValue) => {
    setInputAcOption(newInputValue)
  }}
  onChange={handleAcOptionChange}
  value={state.acOptions || []}
  filterOptions={(x) => x}
  getOptionLabel={(option: AcOption) => option?.code || ''}
  renderOption={({ key, ...props }, option: AcOption) => (
    <li key={key} {...props}>{option.code}&nbsp;&nbsp;&nbsp;{option.description}</li>
  )}
  renderInput={(params) => (
    <TextField {...params} label="AC Option" />
  )}
/>

编辑：

key

属性作为传播的一部分将触发错误（React）。通过显式设置

key

属性可以避免这种情况。

Answer 2

你需要传递道具

 renderOption={(props: object, option: any, state: object) => (
        <div className={styles.option} {...props}>
           {option.name}
        </div>
  )}

Answer 3

您的代码中

renderOption

的签名不正确。要渲染

option.value

，请尝试以下代码：

<Autocomplete
  renderOption={(props, option) => <>{option.value}</>}
/>

来源：renderOption - 自动完成API