AutoComplete Material-ui React getOptionSelected 道具不起作用

Question

我对反应还很陌生，非常感谢这里的一些指示：

我有一个带有某些选项集的自动完成下拉菜单。我希望根据我的条件默认选择其中一个。

据我了解，这可以通过 getOptionSelected prop 在自动完成中完成。

我创建了一个示例来测试它，但是它没有按预期工作。你能帮忙吗？

CodeSandbox Here

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option: { title: string; year: number }) => option.title}
      getOptionSelected={(option) => option.year === 1994}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 }
];

Answer 1

V5

如果您要更新到 v5，getOptionSelected 将重命名为 isOptionEqualToValue。请参阅迁移指南here。

V4

仅当您需要验证所选选项时才使用getOptionSelected，这可能不是您想要的。

如果你想根据条件改变选中的选项，你可以修改Autocomplete组件的value props。在下面的演示中，您可以通过在TextField 中指定选项索引来更改所选选项。

export default function Demo() {
  // Use null instead of undefined to fix mixing uncontrolled and controlled error
  // https://github.com/mui-org/material-ui/issues/18173#issuecomment-552420187
  const [value, setValue] = React.useState(null);
  const onChangeOptionIndex = (e) => {
    const optionIndex = parseFloat(e.target.value);
    const selectedValue =
      top100Films.find((o, i) => i === optionIndex) || top100Films[0];

    setValue(selectedValue);
  };

  return (
    <Box display="flex">
      <TextField label="Option Index" onChange={onChangeOptionIndex} />
      <Autocomplete
        id="combo-box-demo"
        options={top100Films}
        onChange={(_, newValue) => setValue(newValue)}
        value={value}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
      />
    </Box>
  );
}

现场演示