首次加载页面时，材质UI自动完成功能选择默认选项

Question

如何在Material UI自动完成中默认选择一个值？

defaultValue不起作用。

在此示例中，我想将该选项显示为默认选项并显示为选中状态。

  {
    id: "flying",
    name: "Flying"
  },

https://codesandbox.io/s/vj4fj?file=/src/App.js

Answer 1

请在自动完成选择器中添加以下行：

defaultValue={data.find(ob => ob.id === "flying")}

喜欢

<Autocomplete
        defaultValue={data.find(ob => ob.id === "flying")}
        id="my-autocomplete"
        options={data.sort((a, b) => a.name > b.name)}
        getOptionLabel={option => option.name}
        // style={{ width: "20vw" }}
        renderInput={params => (
          <TextField
            {...params}
            label="Hogwarts classes"
            variant="outlined"
            style={{ width: 300 }}
          />
        )}
        renderOption={handleRenderOption} // highlighter
      />

Answer 2

受以上答案的启发，正确答案是

defaultValue={data.find(ob => ob.id === "flying")}