reactjs - 使用带有 loading 和 freeSolo Prop 的 react material-ui 自动完成

Question

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

引用:https://codesandbox.io/s/material-demo-mqtk8

在上面的示例中，如果将 freeSolo 设置为 false，则加载文本不会按预期显示选项文本。

Answer 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>
        )
      }}
    />
  )}
/>