Автозаполнение пользовательского интерфейса материала с аватаром в текстовом поле

Question

Могу ли я достичь avatar в компоненте textfield of autocomplete material-ui , поскольку опора getOptionLabel принимает только строку и параметр рендеринга, отображается ожидаемый пользовательский интерфейс .ie изображение профиля и имя , можем ли мы получить то же самое, т.е. изображение профиля и имя в renderInput 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 который будет отображать значок на основе выбранного значения (я все еще не могу найти способ получить доступ к объекту параметров).

Здесь - это полная и запущенная песочница проект