Javascript 在文本字段中使用化身自动完成材质UI

当

getOptionLabel

prop只接受字符串和呈现选项时，我能否在组件的

textfield

中实现

avatar

，显示预期的UI。即配置文件图片和名称，我们可以在

renderInput

textField

中获得相同的内容，即配置文件图片和名称吗？您可以在renderInput道具中返回自定义组件，自定义组件可以是图标和文本字段的组合，如下所示

renderInput={(params, data) => (
  <div style={{ position: "relative" }}>
    {params.inputProps.value && (
      <span
        style={{
          position: "absolute",
          transform: "translateY(50%)",
          marginLeft: "5px"
        }}
      >
        {/* Write logic to have Icon from params.inputProps.value */}
        {countryToFlag("AD")}
      </span>
    )}
    <TextField
      {...params}
      label="Choose a country"
      variant="outlined"
      inputProps={{
        ...params.inputProps,
        autoComplete: "new-password",
        style: { paddingLeft: "20px" } // disable autocomplete and autofill
      }}
    />
  </div>
)}

renderInput={（参数，数据）=>(
{params.inputProps.value&&(
{/*将逻辑写入params.inputProps.value*/}
{countryToFlag（“AD”）}
)}
)}

如您所见，我提供了绝对位置

span

，它将根据所选值呈现图标（我仍然无法找到访问选项对象的方法）

系统是否已完成并正在运行

---

您是否尝试了建议的答案？