首次加载页面时，Material UI Autocomplete 选择默认选项答案

【问题标题】：Material UI Autocomplete select default option when page loads first首次加载页面时，Material UI Autocomplete 选择默认选项
【发布时间】：2020-11-18 05:04:03
【问题描述】：

Material UI Autocomplete 中如何默认选择一个值？

defaultValue 不起作用。

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

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

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案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
      />

【讨论】：

谢谢。我试过了，但盒子仍然显示霍格沃茨课程，这是标签。如果我删除标签，它是空白的。
这是有效的解决方案。请查看codesandbox.io/s/material-ui-autocomplete-highlight-my6o1?file=/…
我接受了答案，但后来发现我们不能使用 value = 因为这会使它的值永久地成为初始值。

【解决方案2】：

受上述答案启发，正确答案是

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

【讨论】：