javascript - Material UI 自动完成与文本字段中的头像

Question

我可以avatar在autocomplete material-ui组件中实现，因为textfieldprop只接受一个字符串和渲染选项，预期的 UI 会显示。即个人资料图片和名称，我们可以在getOptionLabelrenderInput textField

Answer 1

您可以在 renderInput 道具中返回您的自定义组件，并且该自定义可以是图标和 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，它将根据所选值呈现图标（我仍然无法找到访问选项对象的方法）。

这是完整且正在运行的沙箱项目