Как отобразить значение, отличное от renderValue в материале выберите пользовательский интерфейс

Question

У меня есть раскрывающийся список, в котором должны отображаться флаги 3 стран, и я должен выбрать одну. Но выпадающая логика работает по-разному в зависимости от renderValue. У меня есть 3 разных случая:

Случай 1

renderValue={value => <img src={value.country[0]} alt="RenderValue" />}

отображается флаг renderValue, но если вы попытаетесь выбрать другое значение, у вас будет ошибка:

The above error occurred in the <ForwardRef(SelectInput)> component: (...)
Consider adding an error boundary to your tree to customize error handling behavior.

---

Случай 2

renderValue={value => <img src={value[0]} alt="RenderValue" />}

флаг renderValue не отображается, и если вы пытаетесь выбрать другое значение, он продолжает отображать RenderValue

---

Кейс 3

The renderValue is removed 

Все работает, но у нас больше значение рендеринга

---

Вот выбор: https://codesandbox.io/s/reverent-fermat-zssow?fontsize=14

Вы можете играть во всех трех случаях. Случай 3 - это случай по умолчанию:)

Я хочу, чтобы select работал с renderValue. Не знаю, что я делаю неправильно

Answer 1

Мне неясно, чего вы пытались достичь с помощью функции renderValue. Это полезно только в том случае, если вы хотите, чтобы выбранное значение выглядело иначе, чем соответствующий MenuItem, но содержимое, которое вы имели в renderValue, казалось, имело то же намерение, что и MenuItem (показать изображение флага).

Главное, что я изменил для правильного отображения, - это использование импортированных изображений флагов при построении массива стран, и я исправил инициализацию состояния country как одно из допустимых значений (а не объект смассив всех значений).

Если вы все еще думаете, что вам нужно использовать renderValue, уточните, что вы хотите отрисовывать по-разному, относительно выбранного значения по сравнению с тем, как оно отображается, если Selectopen.

Вот моя модифицированная версия вашей песочницы:

import React from "react";
import ReactDOM from "react-dom";

import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import France from "./assets/flags/france.png";
import Allemagne from "./assets/flags/germany.png";
import Suisse from "./assets/flags/switzerland.png";

const countries = [
  {
    label: "France",
    src: France,
    link: " ",
    value: "FR"
  },
  {
    label: "Allemagne",
    src: Allemagne,
    link: " ",
    value: "DE"
  },
  {
    label: "Suisse",
    src: Suisse,
    link: " ",
    value: "CH"
  }
];

const useStyles = makeStyles(theme => ({
  button: {
    display: "block",
    marginTop: theme.spacing(2)
  },
  formControl: {
    margin: theme.spacing(5),
    minWidth: 120,
    backgroundColor: "transparent"
  },
  select: {
    textAlign: "center",
    textDecoration: "none"
  }
}));
function App() {
  const classes = useStyles();
  const [country, setCountry] = React.useState(France);
  const [open, setOpen] = React.useState(false);

  const handleChange = event => {
    setCountry(event.target.value);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <form autoComplete="off">
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="open-select" />
        <Select
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
          value={country}
          name="country"
          onChange={handleChange}
          inputProps={{
            id: "open-select"
          }}
        >
          {countries.map((option, key) => (
            <MenuItem value={option.src} key={key}>
              <img src={option.src} alt={option.label} />{" "}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);