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

Posted 2023-03-24

【中文标题】MUI 自动完成自定义选项，不显示所选选项

【英文标题】：MUI Autocomplete custom options, not showing selected option

【发布时间】：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 
];

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

【参考方案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" />
      />
    </>
  );