React MUI - 通过 rederInput 自定义自动完成组件

Question

我有一个来自官方文档的 React MUI Autocomplete 组件。

以下是国家/地区的示例。

import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function CountrySelect() {
  return (
    <Autocomplete
      id="country-select-demo"
      sx={{ width: 300 }}
      options={countries}
      autoHighlight
      getOptionLabel={(option) => option.label}
      renderOption={(props, option) => (
        <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
          <img
            loading="lazy"
            width="20"
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
            alt=""
          />
          {option.label} ({option.code}) +{option.phone}
        </Box>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps,
            autoComplete: 'new-password', // disable autocomplete and autofill
          }}
        />
      )}
    />
  );
}

// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const countries = [
  { code: 'AD', label: 'Andorra', phone: '376' },
   ..........
   ..........
  {
    code: 'AE',
    label: 'United Arab Emirates',
    phone: '971',
  },
  
];

在选择过程中，组件会显示国家列表以及一些信息和相应的图标标志。

选择国家后，该国家的名称会显示在文本字段中。

根据我从了解到的情况，可以操纵属性 renderInput 来自定义组件的最终外观，在这个例子中的 TextField.

有没有办法在所选国家/地区名称附近显示旗帜？

Answer 1

要显示所选选项的图标，您应该将开始 startAdornment 添加到 TextField 组件的 InputProps。此道具负责在所选选项的文本之前呈现图标。然后我们可以将选中选项的属性传递给startAdornment来显示选中选项的图标：

    <Autocomplete
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            label="Choose a country"
            inputProps={{
              ...params.inputProps,
              autoComplete: "new-password" 
            }}
            InputProps={{
              ...params.InputProps,
              startAdornment: value ? (
                <InputAdornment position="start">
                  <img
                    loading="lazy"
                    width="20"
                    src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`}
                    srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`}
                    alt=""
                  />
                </InputAdornment>
              ) : null
            }}
          />
        );
      }}
    ... other props

Demo

React MUI - 通过 rederInput 自定义自动完成组件

React MUI - Customizing Autocomplete component by rederInput

javascript

reactjs

material-ui