使用带有加载和 freeSolo 道具的 react material-ui 自动完成

【问题标题】：Using react material-ui autocomplete with loading and freeSolo props使用带有加载和 freeSolo 道具的 react material-ui 自动完成
【发布时间】：2019-12-10 11:44:08
【问题描述】：

我一直在 freeSolo 模式下使用 material-ui 的autocomplete。我想在加载选项时显示加载文本。它目前没有按预期工作。但是禁用 freeSolo 时会显示加载文本。对于无选项文本也可以看到相同的行为。是否可以在 freeSolo 模式下显示加载和无选项文本？

参考：https://codesandbox.io/s/material-demo-mqtk8

在上面的例子中，如果 freeSolo 设置为 false，加载文本和没有选项文本会按预期显示。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

使用这个道具loadingText你可以设置自己的加载文本。

你可以看这个 MaterialUi 文档，这里是链接Material UI AutoComlete API

 <Autocomplete
  freeSolo
  id="asynchronous-demo"
  style={{ width: 300 }}
  open={open}
  onOpen={() => {
    setOpen(true);
  }}
  onClose={() => {
    setOpen(false);
  }}
  getOptionSelected={(option, value) => option.name === value.name}
  getOptionLabel={(option) => option.name}
  options={options}
  loading={loading}
  loadingText="Your loading text here"
  renderInput={(params) => (
    <TextField
      {...params}
      label="Asynchronous"
      fullWidth
      variant="outlined"
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <React.Fragment>
            {loading ? (
              <CircularProgress color="inherit" size={20} />
            ) : null}
            {params.InputProps.endAdornment}
          </React.Fragment>
        )
      }}
    />
  )}
/>

【讨论】：