Material UI 自动完成与文本字段中的头像答案

【问题标题】：Material UI Autocomplete with Avatar in textfieldMaterial UI 自动完成与文本字段中的头像
【发布时间】：2020-06-17 07:05:31
【问题描述】：

我能否在autocomplete material-ui 组件的textfield 中实现avatar，因为getOptionLabel 道具只接受字符串和渲染选项，预期的UI 会显示。即个人资料图片和名称，我们可以得到相同的东西吗即renderInputtextField中的头像和姓名

【问题讨论】：

您尝试过建议的答案吗？

标签： javascript reactjs material-ui

【解决方案1】：

您可以在renderInput props中返回您的自定义组件，并且该自定义可以是图标和TextField的组合，就像这样......

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>
)}

如您所见，我提供了绝对位置 span，它将根据所选值呈现图标（我仍然无法找到访问选项对象的方法）。

Here 是完整且正在运行的sandbox project

【讨论】：