Question

如何在textField中显示所选选项？我可以使用什么道具？

单击输入字段时将显示选项，但是选择选项标签后，所选文本不会显示在文本字段中。

这是我正在使用的代码：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CircularProgress from "@material-ui/core/CircularProgress";
import axios from "axios";

class AutoC extends React.Component {
  state = {
    value: "",
    open: false,
    options: []
  };

  getOptions = () => {
    this.setState({ open: true });
    const { options } = this.state;

    if (options.length > 0) {
      return;
    }

    // returns list of university names

    axios
      .post("/api/search", { search: "   " })
      .then(res => {
        this.setState({ options: res.data });
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    const { open, options, value } = this.state;
    const loading = open && options.length === 0;

    return (
      <div
        style={{ marginTop: "40px", display: "flex", justifyContent: "center" }}
      >
        <Autocomplete
          id="asynchronous-demo"
          style={{ width: 300 }}
          open={open}
          onOpen={this.getOptions}
          onClose={() => this.setState({ open: false })}
          getOptionLabel={option => option.Name}
          options={options}
          loading={loading}
          renderInput={params => (
            <TextField
              {...params}
              label=""
              fullWidth
              InputProps={{
                ...params.InputProps,
                endAdornment: (
                  <React.Fragment>
                    {loading ? (
                      <CircularProgress color="inherit" size={20} />
                    ) : null}
                    {params.InputProps.endAdornment}
                  </React.Fragment>
                )
              }}
            />
          )}
        />
      </div>
    );
  }
}

export default AutoC;

Answer 1

我认为我有同样的问题。通过将'@ material-ui / core'和'@ material-ui / lab'版本更改为package.json中的最新版本进行了修复。

如何在Material ui自动完成的输入文本字段中显示所选值？

1 个答案: