MUI 自动完成自定义选项，不显示所选选项答案

【问题标题】：MUI Autocomplete custom options, not showing selected optionMUI 自动完成自定义选项，不显示所选选项
【发布时间】：2021-12-05 09:37:37
【问题描述】：

我正在使用 MUI v5 Autocomplete 作为我的下拉菜单。

I have options with title and id when an option is selected, I want to store the id in the state, also want to update the select (autocomplete here) value with selected movie.

选择中的文本框未反映使用 value 道具设置的值。

我尝试了isOptionEqualToValue，但它有助于在下拉菜单打开时突出显示值。关闭下拉菜单时，不反映所选电影名称。

https://codesandbox.io/s/combobox-material-demo-forked-osex0?file=/demo.js

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

export default function ComboBox() {
  const [movie, setMovie] = React.useState(2);

  return (
    <>
      Movie ID value in the state {movie}
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        value={movie == null ? "" : movie}
        options={top100Films}
        onChange={(e, data) => {
          if (data && data.id) {
            setMovie(data.id);
          }
        }}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        isOptionEqualToValue={(option, value) => option.id === value}
      />
    </>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", id: 1 },
  { title: "The Godfather", id: 2 },
  { title: "The Godfather: Part II", id: 3 }
];

即使选择了该选项，它也不会反映在文本框中

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

如果你想使用controlled mode，value 属性应该是options 数组中的对象之一：

const getDefaultOption = () => top100Films.find((m) => m.id === 2) ?? null;

export default function ComboBox() {
  const [movie, setMovie] = React.useState(getDefaultOption);

  return (
    <>
      <Box mb={3}>Movie ID value in the state {movie.id}</Box>
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        value={movie}
        options={top100Films}
        onChange={(e, data) => setMovie(data)}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
    </>
  );
}

【讨论】：