Как я могу получить выбранный из моего окна автозаполнения с использованием библиотеки пользовательского интерфейса материала в реакции?

Question

Ниже приведен код, который использует внешнюю библиотеку под названием material ui и реализует окно поиска с автозаполнением. когда значение выбрано, входной тег создается и имеет значение: «выбранное значение», как я могу получить доступ к значению, чтобы иметь возможность что-то с ним сделать.

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

class ContractsList extends React.Component {
  render() {
    const contracts = this.props.contracts;
    return (
      <div>
        <div className="searchbar">
          <h1>All Aboard</h1>
        </div>
        <div className="search-bar">
          <Autocomplete
            id="search-bar-id"
            disableClearable
            options={contracts.map(contract => contract.name)}
            renderInput={params => (
              <TextField
                {...params}
                label="Search contract"
                margin="normal"
                variant="outlined"
                InputProps={{ ...params.InputProps, type: "search" }}
              />
            )}
          />{" "}
        </div>
      </div>
    );
  }
}

export default ContractsList;

я пытаюсь получить выбранное значение из поля ввода, но он не работает

Answer 1

Обратный вызов onChange вызывается после изменения значения автозаполнения (изменение значения происходит в основном после выбора / удаления элементов из списка).

onChange={(ev, value) => {
  console.log(value);
}}

Вот рабочий пример как часть автозаполнения:

<Autocomplete
  onChange={(ev, value) => {
    console.log(value);
  }}
  id="combo-box-demo"
  options={autoCompleteItems}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>

Здесь вы можете увидеть коды и поле .