MUI 自动完成自定义选项，未显示所选选项

Question

我的下拉菜单使用 MUI v5 Autocomplete 。

我有选择title和id选择一个选项时，我想的存储id的状态，也需要更新与选择的电影选择（自动完成这里）值。

选择中的文本框不反映使用value道具设置的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 }
];

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

Answer 1

如果要使用受控模式， value prop 应该是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" />}
      />
    </>
  );
}