如何动态选择 Material-UI 自动完成组件中的默认选项？答案

【问题标题】：How to select default option in Material-UI Autocomplete component dynamically?如何动态选择 Material-UI 自动完成组件中的默认选项？
【发布时间】：2020-04-16 22:16:18
【问题描述】：

我正在寻找一种在自动完成组件中预设默认选项的方法，就在 ajax 调用完成加载选项列表时。所以用例是这样的：当用户打开页面时，在后台，选项列表将从 ajax 响应加载到状态中。我想在加载后立即从列表中选择第一个检索到的选项。目前，我只有一种提供选项列表的基本方法：

  <Autocomplete
     options={defaultProps.options}
     getOptionLabel={option => option.name}
                 renderInput={params => (
                  <TextField {...params} variant="outlined" fullWidth />
     )}
  />

但不知道在加载时选择第一个。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我正在使用 useEffect 来演示组件挂载的 ajax 请求。

您可以在组件渲染后使用value 属性设置值。

在等待ajax请求解析时，可以使用loading属性将组件模式改为loading

const [options, setOptions] = useState([]);
  const [def, setDef] = useState(null);

  useEffect((()=>{
    setTimeout(()=>{
      const tempArr = [{name:'Subject'},{name:'Another Subject'}];
      setOptions(tempArr);
      setDef(tempArr[0]);
    }, 1000);
  }), []);

  return (
    <div className="App">
      <h1>Autocomplete</h1>
      {<Autocomplete
        options={options}
        loading={!def}
        value={def}
        getOptionLabel={option => option.name}
          renderInput={params => (
              <TextField {...params} variant="outlined" fullWidth />
        )}
      />}
    </div>
  );

【讨论】：

【解决方案2】：

在最新版本的 Material UI 中，有一个 autoHighlight 属性。

<Autocomplete
    options={defaultProps.options}
    getOptionLabel={option => option.name}
        renderInput={params => (
        <TextField {...params} variant="outlined" fullWidth />
    )}
    autoHighlight // add this
/>

见API for Autocomplete

【讨论】：